select checkbox - show / remove content

by ian_smithz

HTML

<div id="build">

  <div class="checkbox" id="icon1">
      <label><input type="checkbox"> Man</label>
      <span><i class="icon icon-man">xxx</i></span>
  </div>

  <div class="checkbox" id="icon2">
      <label><input type="checkbox"> Woman</label>
      <span><i class="icon icon-woman">yyy</i></span>
  </div>

  <div class="checkbox" id="icon3">
      <label><input type="checkbox"> Child</label>
      <span><i class="icon icon-child">ttt</i></span>
  </div>

  <div class="checkbox" id="icon4">
      <label><input type="checkbox"> Family</label>
      <span><i class="icon icon-family">aaa</i></span>
  </div>

</div>

<div id="preview">
  <div id="icons-selected">

  </div>
</div>

CSS

#build .icon {
  display: none;
}

#preview .icon {
  display: block;
}

JavaScript

$('.checkbox input:checkbox').on('click', function() {

    var $div = $(this).closest('div').get(0);

    if ($(this).is(':checked')) {   
    
        $('#icons-selected').append('<span data-selected-item="' + $div.id + '_selected">' + $($div).find('span').html() + '</span>');
        
    } else {
        $('#icons-selected > span[data-selected-item^="' + $div.id + '"]').remove();
    }
});