JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
					<tr><th><INPUT type="checkbox" id="selectall1"/></th><th><INPUT type="checkbox" id="selectall2"/></th><th><INPUT type="checkbox" id="selectall3"/></th></tr>
					<tr><td><div><input type="checkbox" class="first" name="1"/></div></td><td><div><input type="checkbox" class="second" name="1"/></div></td><td><div><input type="checkbox" class="third" name="1"/></div></td></tr>
					<tr><td><div><input type="checkbox" class="first" name="2"/></div></td><td><div><input type="checkbox" class="second" name="2"/></div></td><td><div><input type="checkbox" class="third" name="2"/></div></td></tr>
					<tr><td><div><input type="checkbox" class="first" name="3"/></div></td><td><div><input type="checkbox" class="second" name="3"/></div></td><td><div><input type="checkbox" class="third" name="3"/></div></td></tr>
					</table>

CSS

div.highlight1 {
    background-color: #9FF781;
}
div.highlight2 {
    background-color: #F78181;
}
div.highlight3 {
    background-color: #8181F7;
}
div.highlight {
    background-color: #EEEEEE;
}

JavaScript

$('#selectall1').click(function(event) { 
        if(this.checked) { 
            $('.first').each(function() { 
                this.checked = true;  
            });
			$('.second').each(function() { 
                this.checked = false;  
            });
			$('.third').each(function() { 
                this.checked = false; 
            });
        }else{
            $('.first').each(function() { 
                this.checked = false; 
            });         
        }
    });
	
	$('#selectall2').click(function(event) {  
        if(this.checked) { 
            $('.second').each(function() { 
                this.checked = true;  
            });
			$('.first').each(function() { 
                this.checked = false; 
            });
			$('.third').each(function() {
                this.checked = false;  
            });
        }else{
            $('.second').each(function() { 
                this.checked = false;  
            });         
        }
    });

$('#selectall3').click(function(event) { 
        if(this.checked) { 
            $('.third').each(function() { 
                this.checked = true;  
            });
			$('.first').each(function() { 
                this.checked = false;  
            });
			$('.second').each(function() { 
                this.checked = false; 
            });
        }else{
            $('.third').each(function() {
                this.checked = false; 
            });         
        }
    });

$(':checkbox').on('change',function(){
 var th = $(this), name = th.prop('name'); 
 if(th.is(':checked')){
  $(':checkbox[name="'  + name + '"]').not($(this)).prop('checked',false);   
  }
});

$("input:checkbox[class='first']").click(function() {
    $(this).parent().toggleClass("highlight1");
});

$("input:checkbox[class='second']").click(function() {
    $(this).parent().toggleClass("highlight2");
});

$("input:checkbox[class='third']").click(function() {
    $(this).parent().toggleClass("highlight3");
});