JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<table>
 <thead>
  <tr>
    <th><strong>Day</strong></th>
    <th><strong>Period 1</strong></th>
    <th><strong>Period 2</strong></th>
    <th><strong>Period 3</strong></th>
    <th><strong>Period 4</strong></th>
    <th><strong>Period 5</strong></th>
    <th><strong>Period 6</strong></th>
    <th><strong>Period 7</strong></th>
    <th><strong></strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>1-Mo</td>
    <td><input type="checkbox" name="lesson[1][1]" value="1" id="lesson_1_1" class="tick_1645_1646_1647_1648_1649_1650_2024"/> <span data-classes="1645_1646_1647_1648_1649_1650_2024" class="lessoncount">(7)</span></td>
    <td><input type="checkbox" name="lesson[1][2]" value="1" id="lesson_1_2" class="tick_1582_1583_1584_1585_1586_1587"/> <span data-classes="1582_1583_1584_1585_1586_1587" class="lessoncount">(6)</span></td>
    <td><input type="checkbox" name="lesson[1][3]" value="1" id="lesson_1_3" class="tick_1658_1673_1684_1700_1706_1736_1737_1769"/> <span data-classes="1658_1673_1684_1700_1706_1736_1737_1769" class="lessoncount">(8)</span></td>
    <td><input type="checkbox" name="lesson[1][4]" value="1" id="lesson_1_4" class="tick_1602_1603_1604_1605_1618_1628"/> <span data-classes="1602_1603_1604_1605_1618_1628" class="lessoncount">(6)</span></td>
    <td><input type="checkbox" name="lesson[1][5]" value="1" id="lesson_1_5" class="tick_"/> <span>(0)</span></td>
    <td><input type="checkbox" name="lesson[1][6]" value="1" id="lesson_1_6" class="tick_1659_1674_1701_1738_1755_1756"/> <span data-classes="1659_1674_1701_1738_1755_1756" class="lessoncount">(6)</span></td>
    <td><input type="checkbox" name="lesson[1][7]" value="1" id="lesson_1_7" class="tick_1719_1720_1721_1722_1723_2003"/> <span data-classes="1719_1720_1721_1722_1723_2003" class="lessoncount">(6)</span></td>
    <td>detail | clear</td>
  </tr>
  <tr>
    <td>1-Tu</td>
    <td><input type="checkbox" name="lesson[2][1]" value="1" id="lesson_2_1" class="tick_1719_1720_1721_1722_1723_2003"/>...

JavaScript

$(document).ready(function () {
    $('.lessoncount').on('click', tickAlike);
});

function tickAlike ()
{
    var classes = $(this).attr('data-classes');
    if ($(this).siblings('.tick_' + classes).is(':checked'))
    {
        console.log('ticking');
        $('.tick_' + classes).prop('checked', false);
    }
    else
    {
        console.log('unticking');
        $('.tick_' + classes).prop('checked', true);
    }
}