JSFiddle - React, Tailwind, and code Playground

by Benjamin DeLong

HTML

<body>
    <button name="start">Click me before clicking cells</button>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</body>

CSS

td {
    font-family: calibri;
    font-size: 12px;
    width: 15px;
    height: 15px;
    border: 1px solid black;
}

.clicked {
    background: yellow;
}

JavaScript

$(document).ready(function () {
    var $tds = $('td'),
        count = $tds.length; // store # of td's
    $("button[name=start]").on('click', function (e) {
        $(this).off(e); // this function won't execute again
        $tds.on('click', function (e) {
            $(this).addClass('clicked')
                .off(e); // execute once per td
            count--; // count - 1
            if (count === 0) {
                console.log('there are no more click handlers');
            }
        });
    });
});