JSFiddle - React, Tailwind, and code Playground
HTML
<input class="number" id="LimitRequiredText" name="LimitRequiredText" type="text" value="">
<input class="col-md-6 mm-dis number" type="text" onfocus="if(this.value == '0') { this.value = ''; }" data-val="true" data-val-number="The field Notional limit must be a number." data-val-required="The Notional limit field is required." id="NotionalLimit" name="NotionalLimit" value="0">
JavaScript
$('input.number').keyup(function (event) {
// skip for arrow keys
if (event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function (index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
$('#Notional').val($('#NotionalLimit').val().replace(/\,/g, ''));
});