JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<ul id="short-list">
        <li><label><input data-index='1' type="checkbox"> Some item 1</label></li>
    <li><label><input data-index='2' type="checkbox"> Some item 2</label></li>
    <li><label><input data-index='3' type="checkbox"> Some item 3</label></li>
        <li><label><input data-index='4' type="checkbox"> Some item 4</label></li>
</ul>

<ul id="full-list">
    <li><label><input data-index='1' type="checkbox"> Some item 1</label></li>
    <li><label><input data-index='2' type="checkbox"> Some item 2</label></li>
    <li><label><input data-index='3' type="checkbox"> Some item 3</label></li>
        
    <li><label><input data-index='4' type="checkbox"> Some item 4</label></li>
    <li><label><input data-index='5' type="checkbox"> Some item 5</label></li>
    <li><label><input data-index='6' type="checkbox"> Some item 6</label></li>
        
   <li><label><input data-index='7' type="checkbox"> Some item 7</label></li>
    <li><label><input data-index='8' type="checkbox"> Some item 8</label></li>
    <li><label><input data-index='9' type="checkbox"> Some item 9</label></li>
</ul>

CSS

ul li {
    list-style: none;
}

ul {
    float: left;
}

JavaScript

var $fullList = $('#full-list'),
    $shortList = $('#short-list');

$shortList.on('change', 'input', function() {
	var index = $(this).data('index');
    
    $fullList.find('input[data-index="'+index+'"]').prop('checked', $(this).prop('checked'));
    
    if($shortList.find('input').length > 4) {
    	$(this).parent().parent().remove();
    }

}) ;


$fullList.on('change', 'input', function() {
	var index = $(this).data('index');
    
    if($(this).prop('checked')) {
    	addToShortLiet(index, $(this).parent().parent());
    } else {
    	removeFromShortList(index, $(this));
    }
    
}) ;

function addToShortLiet(i, el) {
    if(!$shortList.find('input[data-index="'+i+'"]').length) {
    	var $item = el.clone();
    	$shortList.append($item);
        if($shortList.find('input').length > 4) {
            $shortList.find('input').not(':checked').eq(0).parent().parent().remove();
        }
    } else {
        $shortList.find('input[data-index="'+i+'"]').prop('checked', true);
    }
}

function removeFromShortList(i, el) {
    console.log($shortList.find('input').length);
    if($shortList.find('input').length > 4) {
        $shortList.find('input[data-index="'+i+'"]').parent().parent().remove()
    }
    $shortList.find('input[data-index="'+i+'"]').prop('checked', false);
    
}