JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<body style="background-color: #EEEEEE">
<center>
<h1 class="auto-style12">Work Order</h1>
<p class="auto-style14">THIS FORM ONLY WORKS IN INTERNET EXPLORER AT THIS TIME!</p>

<form method="post" action="#">
<fieldset style="width: 588px" border="3">
<table style="width: 585px"><td style="width: 40px" class="auto-style7">Qty</td>
<td style="width: 100px"class="auto-style7">Manufacture</td>
<td style="width: 95px" class="auto-style7">Part Number</td>
<td style="width: 200px"class="auto-style7">Description</td>
<td style="width: 65px" class="auto-style7">Price</td>
<td style="width: 65px" class="auto-style7">Ext</td>
</table>
</fieldset>
<table>		
<td><input type="text" name="qty_1" style="width: 40px"	id="1_value1" onkeyup="multiplyRow(1)">							</td>
<td class="auto-style7"><input type="text" name="manuf_1"  			style="width: 100px"			id="manuf1">							</td>
<td><input type="text" name="part_number1"  	style="width: 95px"				id="partnumber1">						</td>
<td><input type="text" name="part_description1" style="width: 200px"			id="partdesc1">							</td>
<td>
<input type="text" name="part_price1"   	style="width: 65px" 	id="1_value2" onKeyup="multiplyRow(1)">	</td>
<td>
<input type="text" name="total" 			style="width: 65px" 	id="extend1"  onKeyup="summate()">		</td>
</table>	

<table>
<td><input type="text" name="qty_1"   			style="width: 40px"				id="2_value1" onkeyup="multiplyRow(2)">							</td>
<td><input type="text" name="manuf_1" 			style="width: 100px">													</td>
<td><input type="text" name="part_number1"  	style="width: 95px">													</td>
<td><input type="text" name="part_description1" style="width: 200px">													</td>
<td>
<input type="text" name="part_price1" 		style="width: 65px"		id="2_value2" onKeyup="multiplyRow(2)">	</td>
<td>
<input type="text" name="total" 			style="width: 65px"		id="extend2"  onKeyup="summate()">		</td>
</table>

<table>
<td><input type="text" name="qty_1" 			style="width: 40px"				id="3_value1"...

CSS

.auto-style6 {
	text-align: right;
}
.auto-style7 {
	text-align: center;
}
.auto-style9 {
	text-align: center;
	font-size: small;
}
.auto-style11 {
	background-color: #C0C0C0;
}
.auto-style12 {
	font-weight: normal;
}
.auto-style13 {
	background-color: #C0C0C0;
	text-align: center;
}
.auto-style14 {
	font-weight: normal;
	background-color: #FF0000;
}

JavaScript

function multiplyRow(row) {
    
	var this_qty = row+"_value1"	
	var this_price = row+"_value2"
	var this_extend = "extend"+row;	
    document.getElementById(this_extend).value = 
	 (parseInt(document.getElementById(this_qty).value) *
	 parseInt(document.getElementById(this_price).value) )  || 0 ;
	 summate();        
    
}

function rateRow(row){
  var this_payrate = "payrate"+row;
  var this_hours = "hours"+row;
  var this_subtot = "subtotal"+row;
   document.getElementById(this_subtot).value =
	(parseInt(document.getElementById(this_payrate).value) *
	 parseInt(document.getElementById(this_hours).value) )  || 0 ;
	getlabor();
  
}

function summate() {
        	var materialcost=0
        	for (var i=1; i <= 5; i++) {
        		var id = "extend"+i;
				var thisVal =  parseInt(document.getElementById(id).value,10) || 0;
        	    materialcost +=  thisVal ;
        	}
        	document.getElementById("materialcost").value = materialcost || 0;
			tax();
			grandTotal();
		}

function getlabor() {
        	var labortotal=0
			var hourCounter=0
        	for (var i=1; i <= 5; i++) {
        		var id = "subtotal"+i;
				var idHours = "hours"+i;
				var thisVal =  parseInt(document.getElementById(id).value,10) || 0;
				var thisValHours =  parseInt(document.getElementById(idHours).value,10) || 0;
				labortotal +=  thisVal ;    
				hourCounter +=  thisValHours ;    
				
        	}
        	document.getElementById("labortotal").value = labortotal|| 0;
			document.getElementById("totalhours").value = hourCounter|| 0;
			grandTotal();
			
}
		
	function tax(){
		var materialcost = document.getElementById( 'materialcost' ).value || 0;
		var shipping = document.getElementById( 'shipping' ).value || 0;
		var salestax = (Math.round(((materialcost / 100) * 8.1)*100)/100) || 0;
		var materialtotal = ( (materialcost * 1) + (salestax * 1) + (shipping * 1) ) || 0;
				
		document.getElementById( 'materialcost' ).value = materialcost; 
		document.getElementById( 'salestax'...