JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<div id="master-div">


</div>

CSS

#master-div > div{
  display:inline-block;
  width:21.5%;
  margin:1%;
  border:1px solid lightgray;
  border-radius:3px;
  padding:5px;
}

JavaScript

for(var i=0;i<4;i++){
	var masterCheckBox = "masterCheckBox"+(i+1);  
  var masterDiv ="masterDiv"+(i+1);
  $("#master-div").append("<div id="+masterDiv+"><input type='checkbox' id="+masterCheckBox+" style='margin:0px 25px 0px 10px;' /></div>")      
  for(var j=0;j<10;j++){  
  	var slaveCheckBox = "slaveCheck"+(j+1)+masterCheckBox;    
    $("#"+masterDiv).append("<input type='checkbox' id="+slaveCheckBox+">")
  }  
}

$("#masterCheckBox1,#masterCheckBox2,#masterCheckBox3,#masterCheckBox4").change(function(){
		var status = $(this).is(":checked");
    console.log(status)
		$(this).closest("div").find("input[type='checkbox']").each(function(){    	
      if(status){
      	$(this).prop("checked",true)
      } else {
      	$(this).prop("checked",false)
      }
    })
})