JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.trueliteinc.com/form/js/foxy.js"></script>
<div id="page-wrap"><center><img src="http://www.trueliteinc.com/images/carrabbas.png" alt="" /></center>
<table cellpadding="15">
<tbody>
<tr>
<td>&nbsp;&nbsp;Contact Name:&nbsp;</td>
<td><input type="text" name="realname" /></td>
<td>&nbsp;&nbsp;Store #:&nbsp;</td>
<td><input type="text" name="store-number" /></td>
</tr>
<tr>
<td>&nbsp;&nbsp;Email:&nbsp;</td>
<td><input type="text" name="email" /></td>
<td>&nbsp;&nbsp;Address:&nbsp;</td>
<td><input type="text" name="store-address" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;City, State, Zip:&nbsp;</td>
<td><input type="text" name="store-citystatezip" /></td>
</tr>
</tbody>
</table>
<table id="order-table">
<tbody>
<tr><th>&nbsp;</th><th>Vendor</th><th>Part #</th><th>Product Name</th><th>EA/Price</th><th>Case</th><th>CS/Cost</th><th>Order</th><th style="text-align: right; padding-right: 30px;">Totals</th></tr>
<tr style="background-color: green; color: white;">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>Dining Wall Wash</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="odd">
<td><img style="width: 50px; height: auto;" src="http://www.trueliteinc.com/media/catalog/product/cache/1/thumbnail/460x440/9df78eab33525d08d6e5fb8d27136e95/s/2/s2501_1.jpg" alt="" /></td>
<td>SATCO</td>
<td style="text-align: center;">S2501</td>
<td class="product-title">38W A19 120V CL 2PK</td>
<td>0.41</td>
<td>24</td>
<td class="price-per-pallet">$<span>9.84</span></td>
<td class="num-pallets"><input id="sparkle-num-pallets" class="num-pallets-input" type="text" name="SATCO-S2501" /></td>
<td class="row-total"><input id="sparkle-row-total" class="row-total-input" type="text" disabled="disabled" /></td>
</tr>
<tr style="background-color: green; color: white;">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>Food Warming</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="even">
<td><img...

JavaScript

// UTILITY FUNCTIONS 



function IsNumeric(n) {
    return !isNaN(n);
} 

function CleanNumber(value) {

    // Assumes string input, removes all commas, dollar signs, and spaces      
    newValue = value.replace(",","");
    newValue = newValue.replace("$","");
    newValue = newValue.replace(/ /g,'');
    return newValue;
    
}

function CommaFormatted(amount) {
    
	var delimiter = ","; 
	var i = parseInt(amount);
	
	if(isNaN(i)) { return ''; }
	
	i = Math.abs(i);
	
	var minus = '';
	if (i < 0) { minus = '-'; }
	
	var n = new String(i);
	var a = [];
	
	while(n.length > 3)
	{
		var nn = n.substr(n.length-3);
		a.unshift(nn);
		n = n.substr(0,n.length-3);
	}
	
	if (n.length > 0) { a.unshift(n); }
	
	n = a.join(delimiter);
	
	amount = "$" + minus + n;
	
	return amount;
	
}


// ORDER FORM UTILITY FUNCTIONS

function applyName(klass, numPallets) {

    var toAdd = $("td." + klass).text();
    
    var actualClass = $("td." + klass).attr("rel");
    
    $("input." + actualClass).attr("value", numPallets + " pallets");
    
}

function removeName(klass) {
    
    var actualClass = $("td." + klass).attr("rel");
    
    $("input." + actualClass).attr("value", "");
    
}

function calcTotalPallets() {

    var totalPallets = 0;

    $(".num-pallets-input").each(function() {
    
        var thisValue = parseFloat($(this).val());
    
        if ( (IsNumeric(thisValue)) &&  (thisValue != '') ) {
            totalPallets += parseInt(thisValue);
        };
    
    });
    
    $("#total-pallets-input").val(totalPallets).toFixed(2);

}

function calcProdSubTotal() {
    
    var prodSubTotal = 0;

    $(".row-total-input").each(function() {
    
        var valString = $(this).val() || 0;
        
        prodSubTotal += parseFloat(valString);
                    
    });
        
    $("#product-subtotal").val(prodSubTotal.toFixed(2));


}




function calcShippingTotal() {

    var totalPallets = $("#total-pallets-input").val() || 0;
    var shippingRate =...