Cursor movement

HTML & CSS
5 
<div class="crossword-board">
	<!-- ROW 1 -->
	<span class="crossword-board__item--blank" id="item1-1"></span>
	<span class="crossword-board__item--blank" id="item1-2"></span>
	<input id="item1-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[cC]{1}$" required="required" value="" />
	<span class="crossword-board__item--blank" id="item1-4"></span>
	<span class="crossword-board__item--blank" id="item1-5"></span>
	<span class="crossword-board__item--blank" id="item1-6"></span>
	<span class="crossword-board__item--blank" id="item1-7"></span>
	<span class="crossword-board__item--blank" id="item1-8"></span>
	<span class="crossword-board__item--blank" id="item1-9"></span>
	<input id="item1-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
	<input id="item1-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
	<input id="item1-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
	<input id="item1-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
	<input id="item1-14" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
	<!-- ROW 1 -->

this is how all the rows are laid out, it didn’t let me paste whole code

This is my code for the clue boxes and the function to display the right or wrong message

<h1a>CLUE:</h1a>
<h2> ...and Stripes</h2>
	<div class="clue-box
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
 <div id="result">

<script>
function initAutoFocus (input, index, list) {
  const next = list[index + 1]

  if (!next) {
    return
  }

  input.addEventListener('input', () => {
    if (input.value.length === input.maxLength) {
      next.focus()
    }
  })
}

document
  .querySelectorAll('.auto-focus-next')
  .forEach(initAutoFocus)