JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<div id="wrapper">
    <div class="column">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="column">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>

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

CSS

#wrapper {
            
        }
        
        .column {
            width:  100px;
            float: left;
        }
        
        .column div {
            border: 1px solid #333;
            padding: 5px;
        }
    

        .hoverCell {
            background-color:#FFc;
        }
        .selectedCell {
            
            background-color: #ff0;
        }

JavaScript

$(document).ready(function(){
    
    
    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();
          });
    
         
     
    });