when checkbox is selected, move the div to another div

I have a gallery that has a checkbox on top to "check all", several images inside and each one of them has a checkbox. The expected result here is to move one, several or all images to another div when checking the checkbox. The checkbox that selects all images works so-so, but 'm having trouble with single check an image. What am I missing here?

Thanks!

JavaScript

$(function () {
  // Check if user clicks on the checkbox
  $(".bannerCheck, .statusCheckBox").click(function() {

    if($('.bannerCheck, .statusCheckBox').is(':checked')){
      console.log('banner checked');    
      $(".bulkBanner").contents().appendTo("#bannerScroll");
    } 
    else {
      $("#bannerScroll").contents().appendTo(".bulkBanner");
    }
  });
});

HTML Single image select HTML

<div class="bulkBanner col-md-3 objectimage" id="' + hash + '"style="margin-top:20px;">
<!--BANNER-->
<div class="row">
    <!--BANNER CHECKBOX-->
    <div class="col-md-1">
        <input id="statusCheckBox" type="checkbox">
    </div><!--//END COL-MD-1-->
    <!--BANNER NAME-->
    <div class="col-md-7 roboto-condensed">
        <div class="bannernameeditable">
            ' + banner_name + '
        </div>
    </div><!--//END COL-MD-7 ROBOTO-CONDENSED-->
</div><!--//END ROW-->
<!--BANNER IMAGE-->
<div class="row">
    <div class="col-md-12">
      <img class="imageCloudinary ' + disabled + '"src="url_cloudinary'" style="width: 100%;">
    </div><!--//END COL-MD-12-->
</div><!--//END ROW-->

HTML The receiving container of the images

<div id="bannerScroll" class="col-md-3 banner-scroll">
<!--////////////EMPTY EMPTY EMPTY EMPT/////////////////-->
</div><!--//END COL-MD-3-->