JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<table class="horse_race_coupon standard_table" style="z-index: 1;">
          <tbody><tr>
            <th class="number">NO.</th>
            <th colspan="2">Selections</th>
            <th class="checkbox">1ST</th>
            <th class="checkbox">2ND</th>
            <th class="checkbox">Any</th>
          </tr>
          <tr class="">
            <td class="number">1</td>
            <td class="silk"><img alt="20130430bal172501" src="/assets/sports/jockey-colours.png"></td>
            <td class="horse">
              <strong>
                A NEW DAY
              </strong>
              <br>
              <span class="info">J P Ryan / R J Jones</span>
              <br>
              <span class="info"><span class="translation_missing" title="translation missing: en-gb.age:">Age:</span></span>
              <span class="info_dark">8</span>
              <span class="info">weight</span>
              <span class="info_dark">11 12</span>
              <span class="info">form</span>
              <span class="info_dark">3F9F85-</span>
            </td>
            <td class="checkbox"><input class="forecast first" id="first_5360372300" name="1" type="checkbox" value="5360372300"></td>
            <td class="checkbox"><input class="forecast second" id="second_5360372300" name="2" type="checkbox" value="5360372300"></td>
            <td class="checkbox"><input class="forecast any" id="any_5360372300" name="any" type="checkbox" value="5360372300"></td>
          </tr>
          <tr class="">
            <td class="number">2</td>
            <td class="silk"><img alt="20130430bal172502" src="/assets/sports/jockey-colours.png"></td>
            <td class="horse">
              <strong>
                BRUACH NA MARA
              </strong>
              <br>
              <span class="info">W Harney /</span>
              <br>
              <span class="info"><span class="translation_missing" title="translation missing: en-gb.age:">Age:</span></span>
             ...

JavaScript

oncheck: function(checkbox) {
    if ($(checkbox).prop("checked")) { // checking
      if ($(checkbox).hasClass('first')) {
        $('.forecast[value="' + checkbox.value +'"]').prop("checked", false); // unmarking checkboxes in this row
        $('.forecast.first').prop("checked", false);                          // unmarking checkboxes in this column
        $('.forecast.any').prop("checked", false);                            // unmarking checkboxes in Any order column
        $(checkbox).prop("checked", true);
      }
      if ($(checkbox).hasClass('second')) {
        if ($('.forecast.first[value!="' + checkbox.value + '"]:checked').length > 0 ) {
          $('.forecast.second').prop("checked", false);                                  // unmarking checkboxes in this column
          $('.forecast.third[value="' + checkbox.value +'"]').prop("checked", false);    // unmarking 3rd checkboxes in this row
          $(checkbox).prop("checked", true);
        } else {
          $(checkbox).prop("checked", false);
        }
      }
      if ($(checkbox).hasClass('third')) {
        if ($('.forecast.first[value!="' + checkbox.value + '"]:checked').length > 0 &&
            $('.forecast.second[value!="' + checkbox.value + '"]:checked').length > 0) {
          $('.forecast.third').prop("checked", false); // unmarking checkboxes in this column
          $(checkbox).prop("checked", true);
        } else {
          $(checkbox).prop("checked", false);
        }
      }
      if ($(checkbox).hasClass('any')) {
        // unmarking checkboxes in columns : 1st 2nd 3rd
        $('.forecast.first').prop("checked", false);
        $('.forecast.second').prop("checked", false);
        $('.forecast.third').prop("checked", false);
        $(checkbox).prop("checked", true);
      }
    }
    else {
      if ($(checkbox).hasClass('first')) {
        $('.forecast').prop("checked", false); // unchecking all
      }
      if ($(checkbox).hasClass('second')) {
       ...