JSFiddle - React, Tailwind, and code Playground

HTML

<table id="hours" border="1">
 <tbody>
    <tr><td id="tdh00"><input type="checkbox" id="h00"></td><td id="tdh01"><input type="checkbox" id="h01"></td></tr>
    </tbody>
</table>
</body>

CSS

input[type=checkbox] { visibility: hidden; }

JavaScript

$("#hours td").each(function(e){ 
    var ele = $(this).children('input[type=checkbox]');
    var flag = ele.prop('checked');
    if(flag)
    {
        ele.prop('checked', false);
        $(this).css("background", "#265BFA");
    }
    else
    {
        ele.prop('checked', true);
        $(this).css("background", "#FA2421");
    }
});
$("#hours td").click(function(e){ 
    var ele = $(this).children('input[type=checkbox]');
    var flag = ele.prop('checked');
    if(flag)
    {
        ele.prop('checked', false);
        $(this).css("background", "#265BFA");
    }
    else
    {
        ele.prop('checked', true);
        $(this).css("background", "#FA2421");
    }
});