JSFiddle - React, Tailwind, and code Playground

HTML

<p>Values.I <i>(works for column I)</i> </p> 

<form id="form1" name="form" method="post" action="">
    <label>
        <input type="checkbox" name="SelectAll" class="all" />All</label>
   
    <label>
        <input type="checkbox" name="8" class="selector" />8</label>
    <label>
        <input type="checkbox" name="9" class="selector" />9</label>

    <label>
        <input type="checkbox" name="10" class="selector" />10</label>

</form> 

<p>Values.II <i> (should work for column I too)</i></p>

<form id="form1" name="form" method="post" action="">
    <label>
        <input type="checkbox" name="SelectAll" class="all" />All</label>
    <label>
        <input type="checkbox" name="1" class="selector" />1</label>
    <label>
        <input type="checkbox" name="6" class="selector" />6</label>
    <label>
        <input type="checkbox" name="7" class="selector" />7</label>
    <label>
        <input type="checkbox" name="8" class="selector" />8</label>

</form>

<p>Values.III <i>(works for column II)</i></p>

<form id="form2" name="form" method="post" action="">
 <label>
        <input type="checkbox" name="SelectAll" class="all" />All</label>
    <label>
        <input type="checkbox" name="7" class="selector" />7</label>
    <label>
        <input type="checkbox" name="9" class="selector" />9</label>
</form> 

<p>Values.IV <i>(works for column III)</i></p>

<form id="form3" name="form" method="post" action="">
 <label>
        <input type="checkbox" name="SelectAll" class="all" />All</label>
    
    <label>
        <input type="checkbox" name="12" class="selector" />12</label>
    <label>
        <input type="checkbox" name="14" class="selector" />14</label>

</form> </br>

<div>
    <table class="tbresult">
        <tr>

            <th>Sdv</th>
            <th>Med</th>
            <th>Mod</th>
        </tr>

        <tr>

            <td>4</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>

            <td>7</td>
           ...

CSS

.highlight {background:#9ac99d;}


.tbresult td {
	padding: 1px;
	margin: 1px;
	border: 1px solid #ccc;
    text-align: center;
    height:15px;
    width: 8px;  
    white-space: nowrap;
}

JavaScript

// JavaScript Document
    $(document).ready(function() {

    $('.selector').each(function() {
        $(this).on('click', check); 
    });
        $('.all').each(function() {
           $(this).on('click', all); 
        });

    function all(event) {

            if($(this).is(':checked')){  $("input:checkbox:not(:checked)",$(this).parents('form')).not(this).prop("checked","checked");
        } else {
            $("input:checkbox(:checked)",$(this).parents('form')).not(this).prop("checked","");
        }

        //$('.selector').prop("checked", this.name === "SelectAll");

        check(event);
    }

    function check(event) {
        var checked = $(".selector:checked").map(function () {
            return this.name
        }).get()
        $('td').removeClass("highlight").filter(function () {
            return $.inArray($(this).text(), checked) >= 0 &&
                  $('#form' + ($(this).index() + 1)).find('[name="'+$(this).text()+'"]').is(":checked")
        }).addClass("highlight")
        if ($(this).is(".selector"))
            $('.all').not(this).prop("checked", false)

    }


     $( "#Hidden").on( "click", function() {
            $(".selector").toggle();
        });



    });