JSFiddle - React, Tailwind, and code Playground

by vegas

HTML

<body style="background-color: #C0C0C0">
    <center>
        
<h1 class="auto-style12">Work Order</h1>

        <?php // form action to pull up signature script // ?>
        <form method="post" action="process_finished.php" class="auto-style15">
            <input type="hidden" name="id" value="<?php echo $_GET['id']; ?>" />
            <div>
                <fieldset style="width: 625px">
                    <table style="width: 625px">
                        <?php // keep auto style for header centering // ?>
                        <td style="width: 40px" class="auto-style7">Qty</td>
                        <td style="width: 100px" class="auto-style7">Manufacture</td>
                        <td style="width: 110px" 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>
                <fieldset style="width: 625px">
                    <table style="width: 600px">
                        <td>
                            <input type="number" name="item_qty1" style="width: 40px" id="1_value1" onkeyup="multiplyRow(1)" />
                        </td>
                        <td>
                            <input type="text" name="manuf_1" style="width: 100px" id="manuf1" />
                        </td>
                        <td>
                            <input type="text" name="part_number1" style="width: 110px" id="partnumber1" />
                        </td>
                        <td>
                            <input type="text" name="part_description1" style="width: 185px" id="partdesc1" />
                        </td>
                        <td>
                            <input type="currency" name="part_price1" style="width: 65px" id="1_value2"...

CSS

<style type="text/css"> .auto-style6 {
    text-align: right;
}
.auto-style7 {
    text-align: center;
}
.auto-style9 {
    text-align: center;
    font-size: small;
}
.auto-style12 {
    font-weight: normal;
    font-size: xx-large;
    font-family:"Courier New", Courier, monospace;
}
.auto-style13 {
    background-color: #C0C0C0;
    text-align: center;
}
.auto-style14 {
    background-color: #EEEEEE;
}
.auto-style15 {
    margin-right: 0px;
}
</style>

JavaScript

function multiplyRow(row) {

    var this_qty = row + "_value1";
    var this_price = row + "_value2";
    var this_extend = "extend" + row;
    document.getElementById(this_extend).value = (parseFloat(document.getElementById(this_qty).value) * parseFloat(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) * parseFloat(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 = parseFloat(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 = parseFloat(document.getElementById(id).value, 10) || 0;
        var thisValHours = parseFloat(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 ;
    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').value =...