JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Test</h1>
        <input type='text' name='chars[1]' />
        <input type='text' name='chars[2]' />
        <input type='text' name='chars[3]' />
        <input type='text' name='chars[4]' />
        <input type='text' name='chars[5]' />
        <input type='text' name='chars[6]' />

JavaScript

$(document).ready(function() {
            $(document).on("input", "input[name^=chars]", function(e) {
                var text = $(this).val();
                if (text.length == 6) {
                    for (i=1 ; i<=text.length ; i++) {
                        $("input[name^=chars]").eq(i-1).val(text[i-1]);
                    }    
                }
                else if (text.length > 1) {
                    $(this).val(text[0]);
                }
            });
        });