<div class="wrapper">
    <input class="inp" type="text">
    <input class="inp" type="text">
    <input class="inp" type="text">
    <input class="inp" type="text">
    <input class="inp" type="text">
</div>

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 500px;
}

.inp {
  border: none;
  border-bottom: 1px solid silver;
  padding: 5px;
}

.inp:focus {
  border: none;
  outline: none;
  border-bottom: 1px solid #000;
}

const inputs = document.querySelectorAll(`.inp`);

inputs.forEach((input, key) => {
  input.addEventListener(`keyup`, () => {
    console.log(key, inputs.length);

    if (input.value.length >= 10 && inputs.length - 1 !== key) {
      inputs[key + 1].focus();
    } else if (input.value.length >= 10 && inputs.length - 1 === key) {
      inputs[0].focus();
    }
  })
});