JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<span id="mainTopHeading" >Imports & Exports</span>
<span id="lblmainTopHeading">Categories</span>
<span class="main_row mystyleClass" >
<input type="checkbox" id="pH" curstomerName="Zubair & CO" recordID="1920" />
<span title="Zubair & CO" id="pHName">Zubair & CO</span>
<span title="Roland">Roland</span>
</span>
<span class="row" recordID="1920" curstomerName="Zubair & CO" >
<input type="checkbox" recordID="1920" curstomerName="Zubair & CO" />
<span>Order Rice & Sugar</span>
<span>Roland</span>
</span>
<span id="mainTopHeading" >Manufacturing</span>
<span id="lblmainTopHeading">Categories</span>
<span class="main_row mystyleClass" >
<input type="checkbox" id="pH" curstomerName="Howard Manufacturing" recordID="1870" />
<span title="Howard Manufacturing" id="pHName">Howard Manufacturing</span>
<span title="Roland"> Roland</span>
</span>
<span class="row" index="1" recordID="1870" curstomerName="Howard Manufacturing" >
<input type="checkbox" style="left:10;" recordID="1870" curstomerName="Howard Manufacturing" />
<span>Order Tires and Plastic products</span>
<span>Roland</span>
</span>
<span class="row" index="1" recordID="1870" curstomerName="Howard Manufacturing" >
<input type="checkbox" style="left:10;" recordID="1870" curstomerName="Howard Manufacturing" />
<span>Order Electronics</span>
<span>Roland</span>
</span>
<span class="main_row mystyleClass" >
<input type="checkbox" id="pH" curstomerName="James & Sons" recordID="1866" />
<span title="James & Sons" id="pHName">James & Sons</span>
<span title="Roland">Roland</span>
</span>
<span class="main_row mystyleClass" >
<input type="checkbox" id="pH" curstomerName="Villa Thresa Inc" recordID="1866" />
<span title="Villa Thresa Inc" id="pHName">Villa Thresa Inc</span>
<span...
CSS
.main_row { background: #eee; }
.main_row, .row { display: block; }
.row { padding-left: 20px; }
JavaScript
$(".main_row input").change(function() {
$(this).closest(".main_row").nextUntil(".main_row")
.find(":checkbox").attr("checked", this.checked);
});