JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="results-body">
        <table>
            <thead>
                <tr>
                    <td class="small center">
                        <input type="checkbox" id="checkall" onclick="master();" />
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="center">
                        <input type="checkbox" class="slave" onclick="slave();" />
                    </td>
                </tr><tr>
                    <td class="center">
                        <input type="checkbox" class="slave" onclick="slave();" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- LOAD THE JS AT THE END OF THE FILE -->
    <script>
        $(document).ready(function(){
            master = function() {
                if ($( '#checkall:checkbox' ).is(":checked"))
                    $('input:checkbox').attr('checked',true);
                else
                    $('input:checkbox').attr('checked',false);
            }
            slave = function() {
                var allSelected = true;
                $( '.slave[type="checkbox"]' ).each(function() {
                    if ($( this ).is(":not(:checked)")){
                        allSelected = false;
                        //return;
                    }
                });
                if (!allSelected) {
                    //$( '#checkall:checkbox' ).removeAttr('checked');
                    alert("REMOVE: \nFrom " + $( '#checkall:checkbox' ).attr('checked') );
                    $( '#checkall:checkbox' ).attr('checked',false);
                    alert("to " + $( '#checkall:checkbox' ).attr('checked') );

                } else {
                    alert("ADD: \nFrom " + $( '#checkall:checkbox' ).attr('checked') );
                    $( '#checkall:checkbox' ).attr('checked',true);
                    alert("to " + $( '#checkall:checkbox'...