JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<table align="center">
<tr>
<td colspan="3" align="center"><img src="" title="img-title" /></td>
</tr>
<tr>
<td colspan="3"><br/></td>
</tr>
<tr>
<td align="center">Quantity:</td>
<td colspan="2"></td>
</tr>
<tr>
<td><input type="number" min="64" max="9999" name="quantity" value="64" /></td>
<td>20/per item
<input type="hidden" name="price" value="20" /></td>
<td id="total-price">Total Goes Here</td>
</tr>
</table>
</form>
JavaScript
$(document).ready(function() {
var calcTotal = function(el) {
var quantity = el.val();
var price = $('[name="price"]').val();
var total = quantity * price;
$('#total-price').html(total);
};
calcTotal($('[name="quantity"]'));
$('[name="quantity"]').on('change', function() {
calcTotal($(this));
});
});