Как добавить новый текстовый инпут, по заполнении предыдущего?

<div id="inputs">
  <input maxlength="5">
</div>

const $inputs = $('#inputs').on('input', 'input', function() {
  const $this = $(this);
  const maxlen = +$this.attr('maxlength');

  if ($this.val().length === maxlen) {
    let $next = $this.next();
    if (!$next.length) {
      $next = $(`<input maxlength="${maxlen}">`).appendTo($inputs);
    }

    $next.focus();
  }
});

// или

document.querySelector('#inputs').addEventListener('input', function(e) {
  const input = e.target;
  const maxlen = +input.getAttribute('maxlength');

  if (input.value.length === maxlen) {
    if (!input.nextElementSibling) {
      this.insertAdjacentHTML('beforeend', `<input maxlength="${maxlen}">`);
    }

    input.nextElementSibling.focus();
  }
});