JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle" style="overflow-x: scroll; ">
	<tr>
	  <td class="tableviewtop"><input name="" type="checkbox" value=""></td>
	  <td class="tableviewtop textaligncenter">Material Name</td>
	  <td class="tableviewtop textaligncenter"></td>
	  <td class="tableviewtop textaligncenter">Color</td>
	  <td class="tableviewtop textaligncenter">Base Price</td>
	  <td class="tableviewtop textaligncenter">MSRP</td>
	  <td class="tableviewtop textaligncenter">MAP</td>
	  <td class="tableviewtop textaligncenter">Net Price</td>
	  <td class="tableviewtop textaligncenter">Units Ord.</td>
	  <td class="tableviewtop textaligncenter">Total Base Price</td>
	  <td class="tableviewtop textaligncenter">Total Net Price</td>
	  <td class="tableviewtop textaligncenter">Dis %</td>
	</tr>
	<tr class="main">
	  <td><input name="" type="checkbox" value=""></td>
	  <td class="textaligncenter">Demo Name</td>
	  <td class="textaligncenter"><a href="#"></a></td>
	  <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tda"/></td>
	  <td class="textaligncenter">$55.00</td>
	  <td class="textaligncenter">$110.00</td>
	  <td class="textaligncenter">$110.00</td>
	  <td class="textaligncenter">$110.00</td>
	  <td class="textaligncenter">140</td>
	  <td class="textaligncenter">$4815.00</td>
	  <td class="textaligncenter">$3284.00</td>
	  <td class="textaligncenter">10%</td>
	</tr>

	<!-- Expander Data Start -->

	<tr class="child" style = "display:none;" id = "tra1">
	  <td><input name="" type="checkbox" value=""></td>
	  <td class="textaligncenter"></td>
	  <td class="textaligncenter"><a href="#"></a></td>
	  <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
	  <td class="textaligncenter">$25.00</td>
	  <td class="textaligncenter">$50.00</td>
	  <td class="textaligncenter">$50.00</td>
	  <td class="textaligncenter">$50.00</td>
	  <td...

JavaScript

$('tr.main').click(function() {
  $(this).nextUntil("tr.main").delay(1000).slideToggle("slow");
});

/*
//To expand all rows for the table... 
$('tr.main').click(function() {
  $(this).nextAll('.child').delay(1000).slideToggle("slow");
});
*/