JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<table cellpadding=0 cellspacing=0 id="order-table">
            <tr>
                 <th>How many?</th> 
            </tr>
            <tr class="odd">
                <td class="product-title">A:</td>
                <td class="num-items">
                <input name="qty" type="text" class="num-items-input" id="A-num-items"></input></td>
                <td style="display:none;" class="times">X</td>
                <td class="price-per-item">($<span>4.99</span> each)</td>
                <td style="display:none;" class="equals">=</td>
                <td style="display:none;" class="row-total"><input name="qty" type="text" class="row-total-input" id="A-row-total" disabled="disabled"></input></td>
            </tr>
            
            <tr class="even">
                <td class="product-title">B:</td>
                <td class="num-items"><input name="qty" type="text" class="num-items-input" id="B-num-items"></input></td>
                <td style="display:none;" class="times">X</td>
                <td class="price-per-item">($<span>4.99</span> each)</td>
                <td style="display:none;" class="equals">=</td>
                <td style="display:none;" class="row-total"><input name="qty" type="text" class="row-total-input" id="B-row-total" disabled="disabled"></input></td>
            </tr>
            <br>
    
            <tr>
                <td colspan="6" style="text-align: right;">

            <br>Total Items: <input type="text" class="totalitems" id="total-items-input" disabled="disabled"></input><br>
                    Total Price: <input type="text" class="total-box" value="0" id="product-subtotal" disabled="disabled" onready="if (this.value == '0') {this.value = '';}" /><br>
                </td>
            </tr>
        </table>
        
        
        <div class="clear"></div>
        <!--
        <div style="text-align: right;">
            <span>TOTAL: </span> 
            <input type="text" class="total-box" value="$0"...

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 i = parseFloat(amount);
    if (isNaN(i)) {
        i = 0.00;
    }
    var minus = '';
    if (i < 0) {
        minus = '-';
    }
    i = Math.abs(i);
    i = parseInt((i + .005) * 100);
    i = i / 100;
    s = new String(i);
    if (s.indexOf('.') < 0) {
        s += '.00';
    }
    if (s.indexOf('.') == (s.length - 2)) {
        s += '0';
    }
    s = s.replace(/^0+/, '');
    amount = minus + s;
    return amount;

}




// ORDER FORM UTILITY FUNCTIONS

function applyName(klass, numItems) {
    var toAdd = $("td." + klass).text();
    var actualClass = $("td." + klass).attr("rel");
    $("input." + actualClass).attr("value", numItems + " clings");
}

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

function calcTotalItems() {
    var totalItems = 0;
    $(".num-items-input").each(function() {
        var thisValue = parseFloat($(this).val());
        if ((IsNumeric(thisValue)) && (thisValue != '')) {
            totalItems += parseFloat(thisValue);
        };
    });
    $("#total-items-input").val(totalItems);

    //check total count
    if (totalItems < 1) {
        //disable add to cart button
        $('.submitbutton').attr("disabled", "disabled");
    }
    else {
        //enable add to cart button
        $('.submitbutton').removeAttr("disabled");
    }
}

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