JSFiddle - React, Tailwind, and code Playground

HTML

<form>

<input type="text" id="fourth" size="1" maxlength="1" />     
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="first" size="1" maxlength="1" />  

</form>

JavaScript

var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("first");
for (var i = 0; i < myInputs.length; i++) {
  myInputs[i].addEventListener("click", function() {
    document.getElementById("first").focus();
  })
 }

myEditable.addEventListener("keypress", function(evt) {

if (evt.which >= 48 && evt.which <= 57) {
    // Here, we have a number. Everything gets shifted to the LEFT
    if (myInputs[0].value == "") {
      for (var i = 0; i < myInputs.length - 1; i++) {
        myInputs[i].value = myInputs[i + 1].value;
      }
      myEditable.value = String.fromCharCode(evt.which);
     }
   } else {
   evt.preventDefault();
    console.log("Sorry");
   }
 });

   myEditable.addEventListener("keyup", function(evt) {
  if (evt.which == 8) {
    //myEditable.blur();
    for (var i = myInputs.length - 1; i >= 1; i--) {
      myInputs[i].value = myInputs[i - 1].value;
    }
    myInputs[0].value = "";
  }
});