JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<input id="ssn1" type="password" /> -
<input id="ssn2" type="password" /> -
<input id="ssn3" type="password" />

JavaScript

var ssnModel = 
[{
	id: "ssn1",
  numOfChars : 3
},
{
	id: "ssn2",
  numOfChars : 2
},
{
	id: "ssn3",
  numOfChars : 4
}];

$(function() {

$.each(ssnModel, function(index, value) {
		var el = $("#" + value.id);
    el.attr("maxlength", value.numOfChars);
		el.keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
     		//show an error box or something?
               return false;
    }
   });
   
   el.keyup(function(e) {
   var id = $(this).attr("id");
   var num = id.substring(id.length - 1, id.length);
   var name = id.substring(0, id.length - 1);
   
   
   if ($(this).val().length >= $(this).attr("maxlength")) {
   		if (num > 0 && num < 3) {
      		$("#" + name.toString() + (Number(num) + 1)).focus();
      }
   }
   
   });

	});
})