JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" />
<input type="text" />
<input type="text" />
<p id="Tip"></p>

JavaScript

var inputs = document.getElementsByTagName('input');
var tip_box = document.getElementById('Tip');
for(var key=0;key<inputs.length;key++){
    var i = inputs[key];
    i.onkeyup = function(){
       check_input();
    }
}
    

function check_input() {
    for(var key=0;key<inputs.length;key++){
        var i = inputs[key];
        if(!(i.value.match(/^\d+$/i) && i.value.length == 11)) {
            i.style.cssText = 'border:1px solid red';
            i.focus();
            return;    
        }
        else {
            i.style.cssText = '';
            if(inputs[key+1]) inputs[key+1].focus();
        }
            
    };
    
}