JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<table class="select">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    <td>29</td>
    <td>30</td>
  </tr>
  <tr>
    <td>31</td>
    <td>32</td>
    <td>33</td>
    <td>34</td>
    <td>35</td>
    <td>36</td>
    <td>37</td>
    <td>38</td>
    <td>39</td>
    <td>40</td>
  </tr>
</table>

CSS

table, td {border: 1px solid black;border-collapse: collapse;border-spacing: 0;margin: 30px auto;}
td {width: 40px;height: 40px;text-align: center;}
.highlighted {background-color: #348A75;}
.active {background-color: #348A75;color: #FFF;}

JavaScript

$('.select tr td').on('click', function(){
	var target = parseInt($(this).index()) +1;
  if($(this).hasClass('active')){
  	$(this).removeClass('active');
  }else{
  	$('.select tr td:nth-child('+target+')').removeClass('active');
  	$(this).addClass('active');
  }
});