JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" role="form" method="post" id="passForm">
  <input id="code-0" type="text" class="passInput" autofocus name="pass[]" maxLength="1" autocomplete="off" size="1" min="0" max="9" required pattern="[0-9]{1}" />
  <input id="code-1" type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input id="code-2" type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input id="code-3" type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input id="code-4" type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input id="code-5" type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="[0-9]{1}" /><br>
  <button type="submit" class="btn btn-lg btn-primary" style="margin: 30px 0 50px;"> submit </button>
</form>

JavaScript

(function() {
  var inputs = $("#passForm input");
  inputs.each(function( i, item ) {
    $(item).keyup(function( e ) {
    if( e.keyCode === 8 || e.keyCode === 'BACKSPACE'){
    if( i === 0){ return }
 			inputs[i-1].focus();   
    }
    else {
     if ($(this).val().length == $(this).attr('maxlength') && inputs[i + 1]) {
        if (inputs[i + 1]) {
          inputs[i + 1].focus();
        }
      }
    }
   });
  });
}());