JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="field1" name="field1" value="" class="txt">
<input type="text" id="field2" name="field2" value="" class="txt">
<input type="text" id="field3" name="field3" value="" class="txt">

CSS

input {
    margin:20px;
}

JavaScript

$(document).ready(function () {
    var maxlength = 3;
    var fakeFocusNextInput = function(sel) {
        var nextel = sel.next();
        var nextval = nextel.val();
        var nextid = nextel.attr('id');
        var nextname = nextel.attr('name');
        nextel.val(sel.val());
        nextel.attr('id', sel.attr('id'));
        nextel.attr('name', sel.attr('name'));
        sel.val(nextval);
        sel.attr('id', nextid);
        sel.attr('name', nextname);
        nextel.remove();
        sel.before(nextel);
    };
    $('.txt').bind("propertychange keyup input paste", function() {
        if($(this).val().length >= maxlength)
            fakeFocusNextInput($(this));
    });
});