JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<input type="text" class="floatify" id="boxPaymentAmount">
</br>
<input type="text" class="floatify" id="boxAmount1">
</br>
<input type="text" id="boxAmount2">
</br>
<input type="text" id="boxAmount3">
</br>
<input type="text" id="boxAmount4">
</br>
<input type="text" id="boxAmount5">
</br>
<input type="text" id="boxGrandTotal">
<input type="radio" id="rbUSCitizenOrPermResY">
<input type="radio" id="rbUSCitizenOrPermResN">

JavaScript

$(document).on("blur", '[id^="boxAmount"]', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseInt($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseInt($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseInt($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseInt($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseInt($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(grandtotal);
});
var $uscitizenyes = $('[id$=rbUSCitizenOrPermResY]');
var $uscitizenno = $('[id$=rbUSCitizenOrPermResN]');
if (!$uscitizenyes.checked && !$uscitizenno.checked) {
    alert('You must select above whether payee is a US Citizen or Permanent Resident or not');
}

$(document).on("blur", '.floatify', function (e) {
 $(this).val(parseFloat($(this).val()).toFixed(2));
});