JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <script type="text/javascript">

            function addThis() 
            {
            alert("hi");
                var ea   = parseInt(document.TransactionForm.earnamount.value);
                var td   = parseInt(document.TransactionForm.taxdeduction.value);
                var ap   = parseInt(document.TransactionForm.amountpaid.value);
                var arwo = parseInt(document.TransactionForm.amountremainwithoffice.value);
                var result = (ea * td) / 100;
                var result1 = ea-result;
                var result2 = result1 - ap;
                document.TransactionForm.amountpayable.value = result1 ;
                document.TransactionForm.amountremainwithoffice.value = result2 ;

            }

        </script>
        <title>Calculate</title>
    </head>
    <body>

        <form action="#" name="TransactionForm" method="post">
            Earn Amount:<br />
            <input type="number" id="earnamount" name="earnamount" onChange="addThis()" ><br /><br />

            Tax Deduction:<br />

            <select name="taxdeduction" id="taxdeduction" onChange="addThis()">

                <option value="2">Two Percent</option>
                <option value="5">Five Percent</option>

            </select>
            <br /><br />

            Amount Payable:<br />
            <input type="number" id="amountpayable" name="amountpayable" ><br /><br />

            Amount Paid:<br />
            <input type="number" id="amountpaid" name="amountpaid" onchange="add()" ><br /><br />

            Amount Remain With Office:<br />
            <input type="number" id="amountremainwithoffice" name="amountremainwithoffice" ><br /><br />
            <input type="submit" value="Submit To Database" />
        </form>

    </body>
</html>