JSFiddle - React, Tailwind, and code Playground

HTML

<table id="my-table">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

CSS

table {
    margin-top: 25px;
    margin-left: 25px
}
td {
    width: 40px;
    padding-left: 20px;
    border-right: solid thin green;
}

JavaScript

$('#my-table').on('click', 'tbody td', function (e) {
     
     if($(this).index() < 4){
         alert('td between 1 and 4 clicked');
     }else{
         alert('td between 5 and 6 clicked');   
     }
     
 });