JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<div class="css-table">
  <div class="css-table-tr">
        <div class="css-table-td" id="1">b</div>
        <div class="css-table-td" id="2">c</div>
    </div>
    <div class="css-table-tr">
        <div class="css-table-td" id="3">e</div>
        <div class="css-table-td" id="4">f</div>
    </div>
</div>     
<br/> 
<div class="css-table">
  <div class="css-table-tr">

        <div class="css-table-td" id="5">b</div>
        <div class="css-table-td" id="6">c</div>
    </div>
    <div class="css-table-tr">

        <div class="css-table-td" id="7">e</div>
        <div class="css-table-td" id="8">f</div>
    </div>
 
</div>     
    
    <INPUT TYPE="submit" id="csstableinfo" VALUE="css info">

CSS

.css-table {
    display: table;
    background-color:#ccc;
    width: 60px;
}
.css-table-tr { 
    display: table-row;     
}
.css-table-td { 
    display: table-cell;
    border:1px solid #fff;
    width: 30px;
    height:30px;
    text-align:center;
  vertical-align:middle;
}

.highligh-cell {
   background: #999; 
}

JavaScript

$( function() {
    var sCount = new Object();
  $('.css-table-td').click( function() {              
     var theTable = $(this).closest('css-table'); 
     sCount[theTable] = $('.highligh-cell').length;
     console.log(sCount[theTable]);
       //code below not working  
     if (sCount[theTable] < 3 || $(e.target).hasClass('highlighted')) 
     $(this).toggleClass("highligh-cell");
  } );
} );