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", "");
        var checkboxes = $("#modalEntity[value=\"group" + clickedValue + "\"]");
        checkboxes.attr("checked", !checkboxes.attr("checked"));


    });
});