JSFiddle - React, Tailwind, and code Playground

by thetylercox

HTML

<html>
<head>
<script src="jquery.min.js"></script> 
</head>
<body>
<input class="txt" name="material" type="text" id="material" value="" size="16" >
1.<br>
<input  class="txt" name="tint" type="text" id="tint" value="" size="16">
2.<br>
<input  class="txt" name="coating" type="text" id="coating" value="" size="16">
3.<br>
<input  class="txt" type="text" name="misc" value="" size="16" >
4. <br>
<input  class="txt1" type="text" name="subtotal" value="" id="subtotal" size="16">
subtotal <br>
<input  class="txt1" type="text" name="tax"  id="tax" value="" size="16">
tax<br>
<input  class="txt2" type="text" name="total1" value="" id="total1" size="16">
Total<br>

</body>
</html>

JavaScript

$(document).ready(function() {
    calculateSum();
    $(".txt").keyup(function() {
    $(".txt").each(function() {
       
            calculateSum();
        });
    });
});

$("#tax").keyup(function() {
 
            $('#total1').val(parseInt($(this).val()) * parseInt($('#subtotal').val()));
    
    });

function calculateSum() {
    var sum = 0;
    $("#sum").val(sum.toFixed(2));
    //iterate through each textboxes and add the values
    $(".txt").each(function() {
        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#sum").html(sum.toFixed(2));
    var subtotal = document.getElementById("subtotal").value == "";
    var subtotal = document.getElementById("subtotal").value = sum;


    function getTax(tax) {
        var taxFloat = parseFloat(tax)
        if (isNaN(taxFloat)) {
            return 1;
        } else {
            return taxFloat;
        }
    }


    var total = getTax($('#tax').val()) * sum;
    var total1 = document.getElementById("total1").value = total;

}