JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" class="formattingNumber"/>
<!-- with other class doesn't work -->
<input type="text" class="other"/>
JavaScript
$(document).ready(function(){
(function($){
$.fn.extend({
formatInput: function(settings) {
var $elem = $(this);
settings = $.extend({
errback: null
}, settings);
$elem.bind("keyup.filter_input", $.fn.formatEvent);
},
formatEvent: function(e) {
var elem = $(this);
var initial_value = elem.val();
elem.val($.fn.insertCommas(initial_value));
},
insertCommas: function(number) {
return number.replace(/,/g, "").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}
});
})(jQuery);
$(".formattingNumber").formatInput();
});