JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<div id="sideBar">
 <table id="sideTable">
        <tr><td id='row0'></td></tr>
        <tr><td id='row1'></td></tr>
        <tr><td id='row2'></td></tr>
        <tr><td id='row3'></td></tr>
        <tr><td id='row4'></td></tr>
        <tr><td id='row5'></td></tr>
        <tr><td id='row6'></td></tr>
        <tr><td id='row7'></td></tr>
        <tr><td id='row8'></td></tr>
    </table>
</div>

CSS

#sideBar td {
    width: 120px;
    height: 25px;
    border: 1px solid black;
}
.hovered {
    background-color: red;
}
#sideBar .clicked{
    background-color: blue;
}

JavaScript

$(function(){
    $('#sideTable td').hover(function(){
        $(this).toggleClass('hovered');
    });
    $('#sideTable td').click(function(){
        $(this).toggleClass('clicked');
    });
});