create compare box on checkbox click not working - php

Question

I'm working on add to compare feature of a website,so on current page there are some results which have a checkbox named add to compare attached.
So when user click on add to compare checkbox the selected result get appended to one compare box div and this process go on.
my problem is,when user want to uncheck or remove the selected result from compare div box he should be able to remove it.
Here's is my code which i have done till yet
html
<div id='compare_box'>
<form action="compare_results.php" method="POST">
<div id='result'>
</div>
<button id="compare_submit" type="submit" class="btn btn-primary btn-sm">compare</button>
</form>
</div>
<div class="col-md-3 photo-grid " style="float:left">
<div class="well well-sm">
<h4><small><?php echo $title; ?></small></h4>
<br>
<div class="features">
<div id="compare_feature">
<input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare
</div>
<button class='btn btn-sm btn-info favourite_feature' value="<?php echo $id;?>">add to favourite</button>
</div>
</div>
</div>
css
#compare_box
{
display: none;
}
ajax call
$(".compare").change(function() {
if(this.checked) {
$('#compare_box').show();
var check = $(this).val();
$.ajax({
type: 'POST',
url: 'compare.php',
dataType : "JSON",
data:{value : check},
success: function(data)
{
console.log(data);
console.log(data.id);
var output = "<div class='col-md-3 photo-grid' style='float:left'>";
output += "<div id='course_title' class='well well-sm'>";
output += "<h4>"+data.title+"</h4>";
output+="<textarea class='hidden' id='hidden_title' name='course_title[]' value=>"+data.title+"</textarea>";
output+="</div>";
output+="<input type='hidden' id='hidden_id' name='course_id[]' value="+data.id+">";
output+="</div>";
$('#result').append(output);
}
});
}
});
PS: I'm trying to implement something like this

Answer 1

What is '#compare_box' ? Is it the element that appears when the checkbox disappear (in your exemple at 'your selection')?
Then bind an action on '#result' - precise something that can link your element to check box like an id (when you prepare your html in ajax response).
$('#result').on('click', function() {
$($(this).data('id')).prop('checked', false); // uncheck it
$(this).remove();
});
Do the same for when you uncheck a checkbox (find the element with data-id of your check box and remove it)
EDIT : it's not the perfect code to make it work, you might adapt depending on where you bind click or place the data-id