JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-1 paddingright "><input type="number" id="num1"  maxlength="4" ></div>
<div class="col-1 paddingright"><input type="number"  id="num2"   maxlength="4" ></div>
<div class="col-1 paddingright"><input type="number"  id="num3"  maxlength="4"  ></div>
<div class="col-1"><input type="number" maxlength="4" id="num4"  ></div>

JavaScript

(function (){
$("#num1, #num2, #num3, #num4").on("keydown", function (t) {
    //add the key's you want to accept such as backspace or arrow keys etc.
    if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
    var maxlength = 4;
    var num1 = $("#num1").val().length;
    var num2 = $("#num2").val().length;
    var num3 = $("#num3").val().length;
    var num4 = $("#num4").val().length;
    $(this).val($(this).val().replace(/[^0-9\.]/g,''));

    if (num1 >= 4) {
    $("#num2").focus();
    }
    if(num1 >= 4 && num2 >= 4){
      $("#num3").focus();
    }
    if((num1 >= 4 && num2 >= 4) && num3 >= 4){
      $("#num4").focus();
    }

    if ((num1 >= 4 && num2) && (num3 >= 4 && num4)){
            $("#num4").val($("#num4").val().substr(0,3));
    }
    }

  });   
})();