我应该如何将从ajax调用中获取的数据放入隐藏的div框中

i am working on a project and come across a module.

page1
user have to search from search bar which will take him to page 2.

page2
On page 2 all fetched results will get displayed to user in div's. Each result has a checkbox associated with it.
result format

when i click on add to compare check box ,ajax call is executed and fetched selected result should appear in hidden div.

my problem is it is only shows first result in hidden div and not working with another result.enter image description here

My code of page 2

 <script type="text/javascript">
$(document).ready(function()
{
    var check = $('#compare').val();
    $("#compare").change(function() {
if(this.checked) {        
    $.ajax({
        type: 'POST',
        url: 'compare.php',
        dataType : 'JSON',
        data:{value : check},
        success: function(data)
        {
            console.log(data);
            $('#compare_box').html(data);               
        }
    });       

  $("#compare_box").show();
}
else
{
    $("#compare_box").hide();
}       
 });
});
</script>
</head>
<body>
<?php
$query = $_GET['search_bar'];
$query = "call fetch_data('$query')"or die(mysqli_error($conn));
$result = mysqli_query($conn,$query);
while($row = mysqli_fetch_array($result))
{
  $id = $row['course_id'];
$title = $row['course_title'];
$description = $row['course_description'];
$course_url = $row['course_url'];
$video_url = $row['course_video_url'];
$fee = $row['course_fee'];
$duration = $row['course_duration'];
$start_date = $row['course_start_date'];
$university = $row['university_name'];
$course_provider = $row['course_provider_name'];
$instructor = $row['instructor_name'];

         $_SESSION['result'][$id]  = Array('id'=> $id,'course_title' => $title,'course_description'=> $description,'course_url' => $course_url,'video_url' => $video_url,'fee' => $fee,'course_duration'=>$duration,'start_date'=>$start_date,'university' => $university,'course_provider'=>$course_provider,'instructor'=>$instructor);
?>
    <div id='compare_box'>                  
        </div>      

     <div class="col-md-3 photo-grid " style="float:left">

        <div class="well well-sm">

       <a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
        <h4><small><?php echo $title; ?></small></h4>
       </a>
     <br>
     <input type ='checkbox' name="compare" id="compare" value="<?php echo $id;?>">add to compare
     </div>
</div>
<?php  
}
?>

page3 compare.php

<?php
session_start();
include 'includes/dbconfig.php';
$check = $_POST['value'];
$sql = "SELECT * from course_info_table where course_id = '$check' " or   die(mysqli_error($conn));
$result = mysqli_query($conn,$sql);

$index = 0;
while($row = mysqli_fetch_array($result))
{
    $title = $row['course_title'];

 ?>
<?php
}
echo json_encode($title);
 ?>

You can change

<input type ='checkbox' name="compare" id="compare" value="<?php echo $id;?>">

to

<input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>"> ^you can only have one unique 'id' value in your html doc, which means your first id="compare" will work fine and others with id="compare" will be ignored by the DOM tree

Reference:

http://www.w3schools.com/tags/att_global_id.asp