JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <!-- these will be affected by check all -->
    <div>
        <label><input type="checkbox" class="checkAll" ID="checkall1" >Check all<label></div>
    <div>
        <label><input type="checkbox" />Checkbox<label></div>
    <div>
        <label><input type="checkbox" />Checkbox<label></div>
    <div>
        <label><input type="checkbox" />Checkbox<label></div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div>
        <label><input type="checkbox" class="checkAll" ID="checkall2" >Check all</label></div>
    <div>
        <label><input type="checkbox">Checkbox<label></div>
    <div>
        <label><input type="checkbox">Checkbox<label></div>
    <div>
        <label><input type="checkbox">Checkbox<label></div>
</fieldset>

JavaScript

$('.checkAll').on('change', function(){
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
})