JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

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

<div id="item2">
    <input type=checkbox class="checkbox">
    <span><i class="icon icon-woman">xxx</i></span>
</div>
<div id="item3">
    <input type=checkbox class="checkbox">
</div>
<div id="item4">
    <input type=checkbox class="checkbox">
</div>

<hr>

<div id="result">
  <div id="selected_items">

  </div>
</div>

CSS

#result { border: 1px solid navy; padding: 10px; float: right; }

.icon {
  display: none;
}

#result .icon {
  display: block;
}

JavaScript

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

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

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