How to display checked items (:checked)?

There is a list of items with checkboxes. Need a nearby unit to display the selected elements.
How best to do this? I.e. chose the first checkbox, and in another block(.vybrano) shows that it is selected. Also in the box is selected to add for example a cross, clicking on which the selected elements is returned back to the inactive state.
https://jsfiddle.net/rqndzpb0/
July 12th 19 at 17:07
1 answer
July 12th 19 at 17:09
here's the rough sketch here by clicking on the checkboxes in another block is added to the element if the check box is removed - the item in another block is removed, well, if you click on an element in another block, it is removed and the checkbox of this element is removed

<div class="spisok">
the <ul>
the <li>
 <label for="value-1">
 <span><input type="checkbox" class="checkbox" id="value-1" value="1"></span>
 <span>option 1</span>
</label>
</li>
the <li>
 <label for="value-2">
 <span><input type="checkbox" class="checkbox" id="value-2" value="2"></span>
 <span>option 2</span>
</label>
 </li> 
the <li>
 <label for="value-3">
 <span><input type="checkbox" class="checkbox" id="value-3" value="3"></span>
 <span>option 3</span>
</label>
</li>
</ul>
</div>

<div class="vybrano">
 here should be noted the values of the checkboxes
 </div>


$('.checkbox').click(function(){
var el = $(this);
if(el.prop('checked')){
$('.vybrano').append('<div class="added" value="'+el.val()+'">'+ el.val()+'-remove</div>');
}
else{
$('[value="'+ el.val()+ '"]').remove();
}
});


$('body').on ('click' , '.added' , function(){
var el = $(this);
var id = '#value-' + el.attr('valu');
el.remove();
$(id).prop('checked' , false);
});

Find more questions by tags jQuery