JSFiddle - React, Tailwind, and code Playground

by mazzzzz

HTML

<span class="key">
    <input type="text" name="b1" />
    <input type="text" name="b2" />
    <input type="text" name="b3" />
    <input type="text" name="b4" />
</span>

JavaScript

$(document).ready(function() {
    $('span.key').children().each (function () {
        $(this).keyup(function (e) {
            if ($(this).is(':nth-child(1)'))
            {
                if ($(this).val().length > 8)
                {
                    var letters = $(this).val().split("");
                    
                    var box = 1;
                    var boxletters = "";
                    for (var i = 0; i < letters.length;i++)
                    {
                        if (i % 8 == 0 && i != 0)
                        {
                            $('span.key input[name="b'+box+'"]').val(boxletters);
                            
                            boxletters="";
                            box++;
                        }
                        boxletters += letters[i];
                    }
                    if (box <= 4)
                        $('span.key input[name="b'+box+'"]').val(boxletters).focus();
                }
            }
                          
            if ($(this).val().length >= 8)
            {
                $(this).next().focus();
                $(this).val($(this).val().match(/......../g));
            }
            else if ($(this).val().length == 0 && e.keyCode == 8) //No length and backspace
            {
                $(this).prev().focus();
            }
        });
    });
});