JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    Max 2 chars: <input type="text" maxlength="2" id="field1" />
    <span id="field1length"></span>
    <br />
    Max 5 chars: <input type="text" maxlength="5" id="field2" />
    <span id="field2length"></span>
    <br />
    <span id="display"></span>    
</form>

JavaScript

$(function() {
    $('#field1').keyup(function(){
        var maxLength = $(this).attr('maxlength');
        var currLength = $(this).val().length;        
        $('#field1length').html(currLength);
        
        if(currLength >= maxLength)
            $(this).siblings('input').focus();
    });
    
    $('#field2').keyup(function(){
        var maxLength = $(this).attr('maxlength');
        var currLength = $(this).val().length;        
        $('#field2length').html(currLength);
            $('#field1').keyup(function(){
        var maxLength = $(this).attr('maxlength');
        var currLength = $(this).val().length;        
        $('#field1length').html(currLength);
        
        if(currLength >= maxLength)
            $('#field2').focus();
    });
        if(currLength >= maxLength)
            $('#display').html('THE END');
    });
});