JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>

  <title>Untitled Document</title>
</head>

<body>
  <table id="table1" style='border-collapse: collapse;'>
    <tbody>

      <tr>



        <td align="center" valign="middle" class="nonrandom">aa</td>

        <td align="center" valign="middle" class="random">bb</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="nonrandom">cc</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>
      </tr>

      <tr>
        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center" valign="middle" class="random">&nbsp;</td>

        <td align="center"...

CSS

.state_a {background-color:gray}
.state_b {background-color:green!important}
.state_c {background-color:red}

body {
    
    font-family: "Knockout", "Marker Felt", "Lucida Grande", sans-serif;
    font-size: 30px;
    line-height: 12px;
    
    }

#table1 td, tr { 
border: 1px solid #999;
width: 25px;
height: 25px;
padding: 0px;
margin: 0px;
border-collapse:collapse; 
}

JavaScript

/* here are the numbers that I need to randomly put in the blank tds: 

11,  13,  21,  22,  26,   29,  31,  35,  37,  39,  40,  42,  44, 48,  50,  53,  55,  62,  64,  70,  71,  78,  79,  81,  83,  87,  91,  94,  98,  99,   119,   141,  158,   165,  194,  204, 205,  207,  277,  279,  362,  488,  578,  595,  605,  666,  669,  777,  810,  814,  905,  999
*/


    var randomEntry = function () {
        var magic = [
11,  13,  21,  22,  26,   29,  31,  35,  37,  39,  40,  42,  44, 48,  50,  53,  55,  62,  64,  70,  71,  78,  79,  81,  83,  87,  91,  94,  98,  99,   119,   141,  158,   165,  194,  204, 205,  207,  277,  279,  362,  488,  578,  595,  605,  666,  669,  777,  810,  814,  905,  999
];
        var n = Math.round(Math.random() * (magic.length - 1));
        return magic[n];
    };

    $('td.random').each(function () {
        $(this).text(randomEntry());
    });


$(document.body).click(function () {
    $("td").each(function (i) {

        var $td = $(this);
          
        // Get rid of this gross inline CSS stuff: instead use
        // class="state_a" or whatever in the HTML.
        // I'll work around it here by setting the class via jQ.
        var bgcolor = $td.css("background-color");
        if (bgcolor == "rgb(128, 128, 128)") {
            $td.addClass('state_a');
        }
   
          
        if ($td.is('.state_a')) {
            $td.toggleClass('state_a state_b');
        } else {
          $td.addClass('state_c');
        }
          
      });
    });