JSFiddle - React, Tailwind, and code Playground

by Orik3ll0

HTML

<table>
  <tbody>
    <tr>
      <td class="border-box"><input class="border-box transition" type="text" name="d1" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d2" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d3" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d4" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d5" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d6" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d7" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
    </tr>
  </tbody>
</table>

JavaScript

$(".transition").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.transition').focus();
  }
});