JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' id='txt1' maxlength='5' />
<input type='text' id='txt2' maxlength='5' />

JavaScript

$.extend($.expr[':'], {
    focusable: function(element) {
        var nodeName = element.nodeName.toLowerCase(),
            tabIndex = $.attr(element, 'tabindex');
        return (/input|select|textarea|button|object/.test(nodeName)
            ? !element.disabled
            : 'a' == nodeName || 'area' == nodeName
                ? element.href || !isNaN(tabIndex)
                : !isNaN(tabIndex))
            // the element and all of its ancestors must be visible
            // the browser may report that the area is hidden
            && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
    }
});

$(document).ready(function() {
    $('input[type=text]').keydown(function() {
        var $this = $(this),
            $focusables = $(':focusable'),
            current = $focusables.index(this),
            $next;
        
        if ($this.val().length == $this.attr('maxlength')) {
            $next = $focusables.eq(current+1).length ?$focusables.eq(current+1) : $focusables.eq(0);
                $next.focus();
        }
    });
});