JSFiddle - React, Tailwind, and code Playground

HTML

<table class="display">
    <tr>
        <td style="vertical-align:top;">
            <table class="display">
                <thead>
                    <tr>
                        <td>
                            <label>
                                <input type="checkbox" class="menu_3" />menu 3</label>
                        </td>
                    </tr>
                </thead>
            </table>
            <table class="display table-hover">
                <tbody>
                    <tr>
                        <td>
                            <label>
                                <input type="checkbox" class="submenu_3" />submenu 3</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                                <input type="checkbox" class="submenu_3" />submenu 3</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        </td>
    </tr>
</table>

JavaScript

$('[class^="menu_"]').on('change', function(){
        $(".submenu_" + this.className.slice(-1)).prop("checked", this.checked);
    });