JSFiddle - React, Tailwind, and code Playground

by werty1001

HTML

<div class="option">

          <div class="optgroup" data-group="apple">
           <div class="checkbox"><label><input type="checkbox" data-group="apple" /> apple1</label></div> 
           <div class="checkbox"><label><input type="checkbox" data-group="apple" /> apple2</label></div> 
           <div class="checkbox"><label><input type="checkbox" data-group="apple" checked /> apple3</label></div> 
            <span class="nooptgroup" style="display:none;">Выбраны все возможные варианты.</span>
          </div>
            
          <div class="optgroup" data-group="samsung">
           <div class="checkbox"><label><input type="checkbox" data-group="samsung" checked /> samsung1</label></div> 
           <div class="checkbox"><label><input type="checkbox" data-group="samsung" /> samsung2</label></div> 
           <div class="checkbox"><label><input type="checkbox" data-group="samsung" /> samsung3</label></div> 
           <div class="checkbox"><label><input type="checkbox" data-group="samsung" /> samsung4</label></div> 
           <span class="nooptgroup" style="display:none;">Выбраны все возможные варианты.</span>
          </div>            
            
          <div class="checked"> <i>Выбранные</i>
           <div data-group="apple"><i>Яблоко</i></div>
           <div data-group="samsung"><i>Корейцы</i></div>                
          </div>             
            
        </div>

CSS

.option {width:400px;overflow: hidden;border: 1px solid #eee;padding:10px;} 
.checked {border-top: 1px solid #eee;padding:10px;background-color: #f9f9f9;}
.optgroup {border-bottom: 1px solid #eee;padding:10px;}
.checked > div {border-bottom: 1px solid #eee;padding:10px;}

JavaScript

$('.option').each(function(){
    
 var b=$(this),
     a=b.find('.checked');
     
 b.find('input:checked').each(function(){
     $(this).closest(".checkbox").appendTo( a.children('div[data-group='+$(this).data("group")+']') )
 });
    
 b.find('input').change(function(){ 
     var group=$(this).data("group");
     
  if($(this).is(":checked")) {$(this).closest(".checkbox").appendTo( a.children('div[data-group='+group+']') )} else {$(this).closest(".checkbox").appendTo( b.children('.optgroup[data-group='+group+']')  )}   
 });
    
});