JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width: 100%; height: 100%; margin: 0 auto; border-bottom:groove; border-left:groove; border-right:groove; border-top:groove; width: 75%; height: 75%;">
        <tr style="border-bottom:medium;">
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove;...

CSS

.green{
    background-color:#00FF00;
}
.red{
    background-color:#FF0000;
}
.gray{
    background-color:#CCCCCC;
}

JavaScript

$(document).ready(function(){

    $('table').on('click','tr',function(){

        switch($(this).attr('class')){
            case 'green':
                $(this).removeClass('green');
                $(this).addClass('red');
                break;
            case 'red':
                $(this).removeClass('red');
                $(this).addClass('gray');
                break;
           case 'gray':
                $(this).removeClass('gray');
               // $(this).addClass('red');
                break;     
           default:
                $(this).addClass('green');                
        }
    });

});