JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<div class="answer_1">
  <input class="inputs letter square border_orange" maxlength="1" type="text" />
  <input class="inputs letter square border_orange" maxlength="1" type="text" />

</div>
<div class="answer_2">
  <input class="inputs letter square border_orange" maxlength="1" type="text" />
  <input class="inputs letter square border_orange" maxlength="1" type="text" />

</div>

JavaScript

$(".inputs").keyup(function() {
  if ($(this).val().length == $(this).attr('maxlength')) {
    if ($(this).next().length) {
      $(this).next().focus();
    } else {
      $(this).closest('div').next().find(':input').first().focus();
    }
  }
});