JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="entityCheckboxHeader1" >
        <label><input type="checkbox" id="entityCheckboxHeader1">Company</label>
        <ul>
            <li><label><input id="modalEntity11" class="entity1" type="checkbox" name="company[]">Microsoft</label></li>
            <li><label><input id="modalEntity12" class="entity2" type="checkbox" name="company[]">Apple</label></li>
        </ul>
    </li>
    <li class="entityCheckboxHeader2">
        <label><input type="checkbox" id="entityCheckboxHeader2">Country</label>
        <ul>
            <li><label><input id="modalEntity21" class="entity3" type="checkbox" name="country[]">USA</label></li>
            <li><label><input id="modalEntity22" class="entity4" type="checkbox" name="country[]">UK</label></li>
        </ul>
    </li>
</ul>

CSS

li > ul {
   margin-left: 10px;       
}

JavaScript

$("li :checkbox").change(function(){
    $(this).closest("li").find("ul :checkbox").prop("checked", $(this).is(":checked"));
});