<section class="container-fluid">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <form class="text-center">
        <div class="form-group">
          <label for="password" class="text-white">Enter 4 Digit Password</label>
          <div class="passcode-wrapper">
            <input id="codeBox1" type="number" maxlength="1" max="9" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)">
            <input id="codeBox2" type="number" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)">
            <input id="codeBox3" type="number" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)">
            <input id="codeBox4" type="number" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)">
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

// Body Styling only Begin ==============
body{text-align: center;background-color: lightcyan;font-family: 'POPPINS', Open-Sans;background: linear-gradient(to right, #4568dc, #b06ab3);}
::selection {color: #8e44ad;}
// Body Styling only End ================


// Container-fluid Styling only Begin ===
.container-fluid {
  .row {
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
}
// Container-fluid Styling only End =====


// =====
// Passcode-wrapper Styling only Begin ==
.passcode-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  margin: 0 auto;
  input {
    width: 50px;
    height: 50px;
    padding: 0;
    margin-right: 5px;
    text-align: center;
    border: 1px solid gray;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
    &::-webkit-inner-spin-button, 
    &::-webkit-outer-spin-button { 
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
    }
    &:focus,
    &.focus {
      border-color: green;
      outline: none;
      box-shadow: none;
    }
  }
}
// Passcode-wrapper Styling only End ====

function getCodeBoxElement(index) {
  return document.getElementById('codeBox' + index);
}
function onKeyUpEvent(index, event) {
  const eventCode = event.which || event.keyCode;
  if (getCodeBoxElement(index).value.length === 1) {
   if (index !== 4) {
    getCodeBoxElement(index+ 1).focus();
   } else {
    getCodeBoxElement(index).blur();
    // Submit code
    console.log('submit code ');
   }
  }
  if (eventCode === 8 && index !== 1) {
   getCodeBoxElement(index - 1).focus();
  }
}
function onFocusEvent(index) {
  for (item = 1; item < index; item++) {
   const currentElement = getCodeBoxElement(item);
   if (!currentElement.value) {
      currentElement.focus();
      break;
   }
  }
}