JSFiddle - React, Tailwind, and code Playground

HTML

Click a cell to toggle the class and update the count.<br /><br />

<div id="wrapper">
    <div class="column">
        <div class="selectedCell">1</div>
        <div>2</div>
        <div class="selectedCell">3</div>
        <div class="selectedCell">4</div>
        <div>5</div>
        <div>6</div>
        <div class="selectedCell">7</div>
    </div>
    <div class="column">
        <div class="selectedCell">8</div>
        <div class="selectedCell">9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
    </div>
    <div class="column">
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div class="selectedCell">18</div>
        <div>19</div>
        <div>20</div>
        <div class="selectedCell">21</div>
    </div>
    <div class="column">
        <div class="selectedCell">22</div>
        <div class="selectedCell">23</div>
        <div class="selectedCell">24</div>
        <div class="selectedCell">25</div>
        <div>26</div>
        <div class="selectedCell">27</div>
        <div>28</div>
    </div>
    <div class="column">
        <div>29</div>
        <div class="selectedCell">30</div>
        <div>31</div>
        <div class="selectedCell">32</div>
        <div>33</div>
        <div>34</div>
        <div class="selectedCell">35</div>
    </div>
</div>

<div id="status"></div>

CSS

body {
    font-family:Arial, sans-serif;
}

#wrapper {

}
.column {
    float:left;
}
.selectedCell {
    background-color:yellow;
}

.column div {
    border:1px solid #000;
    padding:4px;
    margin:3px;
    width:20px;
    height:20px;
    text-align:center;
    cursor:pointer;
}

#status {
    background-color:#F0F0F0;
    padding:10px;
    border:1px solid #666;
    font-family:Arial, sans-serif;
    float:left;
    margin-left:30px;
}

JavaScript

function update_counts(){
    $('#status').html('');
    $('.column').each(function(index){
       $('#status').html($('#status').html() + $(this).find('.selectedCell').length + ' selected cells in column ' + (index + 1) + '<br />');
    }); 
}

$('.column div').click(function(){
    
    // Add or remove class
    $(this).toggleClass('selectedCell');
    
    // Update the class counts
    update_counts();
    
});

// Run the function on domready
$(function(){
    update_counts();
});