JSFiddle - React, Tailwind, and code Playground
HTML
<div class="call-inner-right-form-row-2">
<input type="text" name="phone1" class="call-inner-pnone-1" maxlength="1">
<br><br>
<input type="text" name="phone1" class="call-inner-pnone-2" maxlength="3">
<br><br>
<input type="text" name="phone1" class="call-inner-pnone-3" maxlength="7">
<div id="contenInput"></div>
</div>
JavaScript
$(".call-inner-pnone-1").keyup(function() {
var currentAmountNumbers1 = $(".call-inner-pnone-1").val();
if( currentAmountNumbers1.length >= 1 ){
<!-- alert(currentAmountNumbers1.length); -->
$(".call-inner-pnone-2").focus();
}
});
$(".call-inner-pnone-2").keyup(function() {
var currentAmountNumbers2 = $(".call-inner-pnone-2").val();
if( currentAmountNumbers2.length >= 3 ){
<!-- alert(currentAmountNumbers2.length); -->
$(".call-inner-pnone-3").focus();
} else if(currentAmountNumbers2.length == 0){
$(".call-inner-pnone-1").focus();
}
});
$(".call-inner-pnone-3").keyup(function() {
var currentAmountNumbers3 = $(".call-inner-pnone-3").val();
<!-- alert(currentAmountNumbers3.length); -->
if( currentAmountNumbers3.length == 0 ){
$(".call-inner-pnone-2").focus();
}
});