JSFiddle - React, Tailwind, and code Playground

by abdennour

HTML

<table style="width: 100%; height: 100%; margin: 0 auto; border-bottom:groove; border-left:groove; border-right:groove; border-top:groove; width: 75%; height: 75%;">
     <tbody>
        <tr style="border-bottom:medium;">
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
        </tr>
        <tr>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;">&nbsp;</td>
            <td style="border-bottom:groove; border-left:groove;...

CSS

.green{
    background-color: green ;
    
}
.red{
    background-color: red ;
    
}
.gray{
    background-color: gray ;
    
}

JavaScript

$('td').click(function(){
    var idx=$(this).index(); 
    console.log(idx)
  var col=$('tbody td:nth-child('+(idx+1)+')')
  if($(this).hasClass('green')){
       col.removeClass().addClass('red')
  }else if($(this).hasClass('red')){
       col.removeClass().addClass('gray')
  }
    else if($(this).hasClass('gray')){
      col.removeClass().addClass('gray')
  }else {
       col.removeClass().addClass('green')
  }
    
  
})