Как можно улучшить перескакивание по input'am и их проверку на заполненость?

Question

[Егор]

У меня есть 2 строки с input'ами в которые помещается только 1 символ. Мне надо, чтобы при введении символа перескакивало на следующий input, а при удалении - на предыдущий. Сейчас так и работает. Мне бы хотелось добавить, что если человек написал половину слова и остановился на пустом input'e, чтобы он мог "стереть" его и перейти на предыдущий. И там еще есть функция, которая проверяет, заполнены ли они все и при нажатии на enter выполняется действие.

Также, подскажите, можно ли уменьшить этот код, и чтобы можно было использовать не для 2-ух строк, а для 5, к примеру?

HTML

<div class="row1">
                <input class="input11" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=11 style="margin-left: 155px;">
                <input class="input12" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=12>
                <input class="input13" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=13>
                <input class="input14" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=14>
                <input class="input15" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=15>
                <input class="input16" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=16>
            </div>

            <div class="row2">
                <input class="input21" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=21 style="margin-left: 155px;">
                <input class="input22" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=22>
                <input class="input23" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=23>
                <input class="input24" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=24>
                <input class="input25" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=25>
                <input class="input26" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=26>
            </div>

JavaScript

const inputs1 = document.querySelectorAll('.row1');
const inputs2 = document.querySelectorAll('.row2');



inputs1.forEach(i => {
  i.addEventListener('input', onInput);
  i.addEventListener('keydown', onKeyDown);
})

function onInput(e) {
  e.target.value = e.target.value[e.target.value.length - 1] || "";
  const n = e.target.dataset.n
  const next = document.querySelector(`input[data-n="${+n + 1}"]`)
  if (e.target.value == "") {
    if (n == 1) {
      document.querySelector(`input[data-n=1]`).focus();
    } else {
      document.querySelector(`input[data-n="${+n - 1}"]`).focus();
    }
  } else {
    if (next) {
      next.focus()
    }
  }
}

function onKeyDown(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    if (checkinputs1()) {
      checkRight();
    }
  }
}

function checkinputs1() {
  let isFilled = true;
  inputs1.forEach(i => {
    if (!i.value) {
      isFilled = false;
    }
  });
  return isFilled;
}

inputs2.forEach(i => {
  i.addEventListener('input', onInput);
  i.addEventListener('keydown', onKeyDown);
})

function onInput(e) {
  e.target.value = e.target.value[e.target.value.length - 1] || "";
  const n = e.target.dataset.n
  const next = document.querySelector(`input[data-n="${+n + 1}"]`)
  if (e.target.value == "") {
    if (n == 1) {
      document.querySelector(`input[data-n=1]`).focus();
    } else {
      document.querySelector(`input[data-n="${+n - 1}"]`).focus();
    }
  } else {
    if (next) {
      next.focus()
    }
  }
}

function onKeyDown(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    if (checkinputs2()) {
      checkRight();
    }
  }
}

function checkinputs2() {
  let isFilled = true;
  inputs2.forEach(i => {
    if (!i.value) {
      isFilled = false;
    }
  });
  return isFilled;
}

//дальше там 2 функции с выполняемым кодом при успешной обработке

Мне этот код подсказали, поэтому могу много чего не понимать