JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>
Country
<ul>
<input type="checkbox" id="selectAll" class="select1">Select/Deselect All Country
<li>
<input id="modalEntity" class="entity1" type="checkbox" value="group1" name="India">India
<input id="modalEntity" class="entity2" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>
<li>
Company
<ul>
<input type="checkbox" id="selectAll" class='select2'>Select/Deselect All Company</a>
<li>
<input id="modalEntity" class="entity3" type="checkbox" value="group2" name="Apple">Apple
<input id="modalEntity" class="entity4" type="checkbox" value="group2" name="Google">Google
</li>
</ul>
</li>
</ul>

JavaScript

$(document).ready(function(){
    $("#selectAll").live("click",function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    var clickedValue=$(this).attr('class');
    clickedValue=clickedValue.replace("select", "");
//    $('input:checkbox #modalEntity[value="group'+clickedValue+'"]').attr('checked',true);
    $("#modalEntity").attr("value", "group"+ clickedValue).attr("checked", true);
           
    
    });
});