JSFiddle - React, Tailwind, and code Playground

HTML

<input id="txtHours" class="text misch"/>
<input id="txtCosts" class="text misc"/>
<br>
Totals:
<input id="txtMiscH" class="text hours"/>
<input id="txtMisc" class="text add"/>

JavaScript

$(document).ready(function () {//add up miscaleneous mnumbers
    //dollar amoungs
    $("input[class~='misc']").change(function (event) {
        var sum = 0;
        var num = 0;
        alert("X");
        $("input[class~='misc']").each(function (event) {
            alert("X");
            num = parseInt($(this).val()) || 0;
            sum = sum + num;
        });
        $("input[id*='txtMisc']").val(sum);
        $("input[class~='add']").trigger('change');
    });

    //hours
    $("input[class~='misch']").change(function (event) {
        var sum = 0;
        var num = 0;
        $("input[class~='misch']").each(function (event) {
            num = parseInt($(this).val()) || 0;
            sum = sum + num;
        });
        $("input[id*='txtMiscH']").val(sum);
    });
    });