jQuery addClass example

Change class name on click in jQuery

HTML

<form name="code" action="*" method="post" autocomplete="off">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="a">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="b">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="c">
  <span>—</span>
  <input type="text" name="code" maxlength="1" autocomplete="off" class="d">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="e">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="f last">
</form>

CSS

input {
  width: 20px;
  text-align: center;
}

JavaScript

$('form').on('input', e => {
	var letters = ['a', 'b', 'c', 'd', 'e', 'f'];
	letters.forEach(letter => {
		let field = $(e.target);
		field.val(field.val().replace(/[^0-9]/g, ''));
		if(field.val().length == field.attr('maxlength')) { field.nextAll('input').first().focus(); }
	});
});