JSFiddle - React, Tailwind, and code Playground

HTML

<label for=""><input type="checkbox" class="js-dow">月曜</label>
<label for=""><input type="checkbox" class="js-dow">火曜</label>
<label for=""><input type="checkbox" class="js-dow">水曜</label>
<label for=""><input type="checkbox" class="js-dow">木曜</label>
<label for=""><input type="checkbox" class="js-dow">金曜</label>
<label for=""><input type="checkbox" class="js-dow">土曜</label>
<label for=""><input type="checkbox" class="js-dow">日曜</label>
<table>
  <tr>
    <th class="js-dow">mon</th>
    <th class="js-dow">tue</th>
    <th class="js-dow">wed</th>
    <th class="js-dow">thu</th>
    <th class="js-dow">fri</th>
    <th class="js-dow">sat</th>
    <th class="js-dow">sun</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
</table>

CSS

table {
     border-collapse: collapse;
     display: table;
   }
   
   tr {}
   
   th,
   td {
     border: solid 1px #ccc;
   }
   
   td {
     width: 25px;
     text-align: right;
   }
   
   .selected {
     color: red;
   }

JavaScript

$(function() {
  $(".js-dow").on("click", function() {
    var dow = $(".js-dow").index(this);
    var tr = $("tr");
    var td = $("td");
    if (td.hasClass("selected")) {
      td.removeClass("selected")
    } else {
      tr.each(function() {
        $(this).find(td).eq(dow).addClass('selected');
      });
    }
  });
});