JSFiddle - React, Tailwind, and code Playground

by jc_garcia0527

HTML

<div id="wrapper"> 
     <div id="content">  
          <div class="demo">
<h2>Quotation ID</h2>
    <h3 class="expand"><?php echo $quote_id; ?></h3>
       <div class="collapse">
         <table align='center' border='1' class='display'>
		    <thead>
			    <th><input type='checkbox' onclick='checkall()' id='selectall'/></th>
				<th>Product Type</th>
				<th width='20px'>Product type code</th>
				<th width='20px'>Quantity</th>
				<th>Width</th>
				<th>Height</th>
				<th>Total Sub.</th>
			</thead>
			<tbody>
<?php
					$tots_tots = 0;
					$tots_subs = 0;
					$select_orders2 = mysql_query ("SELECT * FROM tblorder WHERE project_id = '$project_id' AND quotation_id = '$quote_id'") OR DIE (mysql_error());
						while ($row3=mysql_fetch_array($select_orders2)){
							$idd = $row3['id'];
							$project_id2 = $row3['project_id'];
							$order_id = $row3['quotation_id'];
							$prod_type = $row3['prod_type'];
							$prod_type_code = $row3['prod_type_code'];
							$qty = $row3['qty'];
							$width = $row3['width'];
							$height = $row3['height'];
							$tot_sub = $row3['total_subs'];
							
							$tots_subs += $tot_sub;
					
					echo "<tr bgcolor='".$colors[$c++ % 2]."' align='center'>";
						echo "<td>
						<input type='hidden' name='project_name' value='$project_name'>
						<input type='checkbox' name='check_ptc[]' value='$prod_type_code' style='display:none;' checked>
						<input type='checkbox' class='case' name='checkbox[]' value='".$idd."'></td>";
						echo "
								<input type='hidden' name='project_id[]' value='$project_id2'>
							</td>";
						echo "<td>".$prod_type."
								<input type='hidden' name='quotation_id[]' value='$order_id'>
								<input type='hidden' name='prod_type[]' value='$prod_type'>
							</td>";
						echo "<td>".$prod_type_code."
								<input type='hidden' name='prod_type_code[]' value='$prod_type_code'>
							</td>";
						echo "<td>".$qty."</td>";
						echo "<td>".$width."</td>";
						echo...

JavaScript

///SELECTING CHECKBOXES////
$(function(){
 
    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });
 
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){
 
        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }
 
    });
});