JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JSFIDDLE</title>
</head>
<body>
  <fieldset id ="test">
    <input type="text" id="x1" maxlength="5" size="5"/>
    <input type="text" id="x2" maxlength="5" size="5"/>
    <input type="text" id="x3" maxlength="5" size="5"/>
    <input type="text" id="x4" maxlength="5" size="5"/>
    <input type="text" id="x5" maxlength="5" size="5"/>
  </fieldset>
  <fieldset id ="test">
    <input type="text" id="y1" maxlength="5" size="5"/>
    <input type="text" id="y2" maxlength="5" size="5"/>
    <input type="text" id="y3" maxlength="5" size="5"/>
    <input type="text" id="y4" maxlength="5" size="5"/>
    <input type="text" id="y5" maxlength="5" size="5"/>
  </fieldset>
</body>
</html>

JavaScript

$(document).ready(function() {
    
    $("#test input[type=text]").keydown(function(e){
        var $this = $(this),
            val = $this.val(),
            $prev,
            $parent,
            $next;

        if(e.which == 8){
            if(val.length == 0){
                $prev = $this.prev();
                if($prev.length == 0) {
                    $prev = $this.parent().prev().find(':input:last');
                }
                $prev.focus().val($prev.val());
            }
        }
        else if(val.length == $this.attr('maxlength') ){
            $parent = $this.parent();
            $next = $this.next("input");
            if($next.length == 0) {
                $next = $parent.next().find(':input:first');
            }
            $next.focus();
        }
        
    });

});