JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<input name="field1" type="text" class="field" />
<input name="field2" type="text" class="field" />
<input name="field3" type="text" class="field" />
<br/><br/>
<input name="field4" type="text" class="ajax-field" />
<input name="field5" type="text" class="ajax-field" />
</form>
JavaScript
var timer;
$(document).ready(function() {
var fields = $('.field');
var ajaxFields = $('.ajax-field');
createEvents(fields, ajaxFields);
});
function createEvents(fields,ajaxFields) {
$(fields).each(function(inx, field) {
$(field).keyup(function(ev) {
if (timer != null) clearTimeout(timer);
timer = setTimeout(function() {
console.log('Fields: ', fields, '\nAjax Fields: ', ajaxFields, '\nTHE field: ', field);
}, 1000);
});
});
}