JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0" id="our_table1">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>
</br>
<table cellpadding="0" cellspacing="0" id="our_table2">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>
<br/>

<INPUT TYPE="submit" id="gridinfo" VALUE="grid info">

CSS

table td {
  width:25px;
  height:25px;
  text-align:center;
  vertical-align:middle;
  background-color:#ccc;
  border:1px solid #fff;
}

table td.highlighted {
  background-color:#999;
}

JavaScript

jQuery('table').on('click', function (e) {
    var ourTable = jQuery(e.target).closest('table');
    var sCount = ourTable.find('.highlighted').length;
    console.log(ourTable, sCount, $(e.target).hasClass('highlighted'));
    
    if (sCount < 4 || $(e.target).hasClass('highlighted')) {
        $(e.target).toggleClass("highlighted");
    }
  e.preventDefault();
});


jQuery('#gridinfo').on('click', function (e) {
    var selected = new String();
    jQuery('.highlighted').each(function() {
            selected += $(this).text();
        });
    alert("these cells have been selected: " + selected);
    
});