JSFiddle - React, Tailwind, and code Playground

by Ninay is Unknown

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/2.0.12/autoNumeric.min.js"></script>
<input type="text" class="ramt autonum"><br>
<input type="text" class="ramt autonum"><br>
<input type="text" class="ramt autonum"><br>
<input type="text" class="ramt autonum"><br>
<input type="text" class="autonum" id="ReqAmount"><br>

JavaScript

// $(function () {
   //       $(".sum").keyup(function () {
   //           var add = 0 ; 
   //          $(".ramt").each(function () {
   //            add += parseFloat($(this).val().replace(/\,/g, ''));
   //           });
   //           $("#ReqAmount").val(add.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"));
   //       });
   //  });
   jQuery(document).ready(function ($) {
            $('.autonum').autoNumeric('init');
   });
$(document).ready(function(){

		//iterate through each textboxes and add keyup
		//handler to trigger sum event
		$(".ramt").each(function() {

      $(this).on('keyup keypress paste change', function(e) {
          calculateSum();
});
		
		});

	});

	function calculateSum() {

		var sum = 0;
		//iterate through each textboxes and add the values
		$(".ramt").each(function() {

			//add only if the value is number
			if(!isNaN(this.value.replace(/\,/g, '')) && this.value.replace(/\,/g, '').length!=0) {
				 sum += parseFloat(this.value.replace(/\,/g, ''));
			}

		});
		//.toFixed() method will roundoff the final sum to 2 decimal places
		 $("#ReqAmount").val(sum);//.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"));
	}