JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<form onsubmit="return false">
<legend>Test Environment.... Tax Deduction</legend>
<p><label for="earnamount"> Earn Amount</label>
<input type="number" id="earnamount" name="earnamount"></p>
<p><label for="taxdeduction"> Tax Deduction</label>
<input type="number" id="taxdeduction" value="0.02" name="taxdeduction"></p>
<p><label for="amountpayable">Amount Payable</label>
<input type="number" id="amountpayable" name="amountpayable"></p>
<p>Total Tax In: <strong>USD: <output name="amount" for="earnamount taxdeduction">0</output></strong></p>
</form>
JavaScript
$(function() {
return $('#earnamount, #taxdeduction').change(function() {
var earn_amount, tax_rate, tax_total, total;
earn_amount = parseFloat($('#earnamount').val());
tax_rate = parseFloat($('#taxdeduction').val());
tax_total = earn_amount * tax_rate;
total = earn_amount - tax_total;
$('#amountpayable').val(total);
return $('output[name="amount"]').text(tax_total);
});
});