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("keyup change paste", function(e){
	e.preventDefault();
  
	var a=$(this).find("input[type='text'].a");
	var b=$(this).find("input[type='text'].b");
	var c=$(this).find("input[type='text'].c");
	var d=$(this).find("input[type='text'].d");
	var e=$(this).find("input[type='text'].e");
	var f=$(this).find("input[type='text'].f");
						
		a.val(a.val().replace(/[^0-9]/g,""));
		b.val(b.val().replace(/[^0-9]/g,""));
		c.val(c.val().replace(/[^0-9]/g,""));
		d.val(d.val().replace(/[^0-9]/g,""));
		e.val(e.val().replace(/[^0-9]/g,""));
		f.val(f.val().replace(/[^0-9]/g,""));
			
	if(a.val().length == a.attr('maxlength')) { a.next("input").focus(); }
	if(b.val().length == a.attr('maxlength')) { b.next("input").focus(); }
	if(c.val().length == a.attr('maxlength')) { c.next().next("input").focus(); }
	if(d.val().length == a.attr('maxlength')) { d.next("input").focus(); }
	if(e.val().length == a.attr('maxlength')) { e.next("input").focus(); }
	if(f.val().length == a.attr('maxlength')) { f.next("input").focus(); }
  
 });