JSFiddle - React, Tailwind, and code Playground

HTML

<body>

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

            Tax Deduction:<br />

            <select name="taxdeduction" id="taxdeduction" >

                <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>

JavaScript

window.onload =function (){
            var el = document.getElementById("taxdeduction");
            if (el.addEventListener) {
                el.addEventListener("change", add, false);
            } else {
                el.attachEvent('onchange', add);
            }
            };

            function add() 
            {
                alert("in add");
                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 ;

            }