JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

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 () {
    $('.css-table-td').click(function () {
        var theTable = $(this).closest('.css-table');
        var sCount = theTable.find('.css-table-td.highligh-cell').length;
        if (sCount < 2 || $(this).hasClass("highligh-cell")) {
            $(this).toggleClass("highligh-cell");
        }
    });
});

jQuery('#csstableinfo').on('click', function (e) {
    var selected = new String();
    jQuery('.highligh-cell').each(function() {
            selected += $(this).attr('id')+" ";
        });
    alert("these cells have been selected: " + selected);
    
});