JSFiddle - React, Tailwind, and code Playground

HTML

<form id="ios">
    <input type="text" maxlength="1" pattern="\d"/>
    <input type="text" maxlength="1" pattern="\d"/>
    <input type="text" maxlength="1" pattern="\d"/>
    <input type="text" maxlength="1" pattern="\d"/>
    <input type="text" maxlength="1" pattern="\d"/>
    <input type="text" maxlength="1" pattern="\d"/>
    <input type="hidden" id="otp" />
    <br/><br/>
    <input type="button" onclick="showOTP();" value="GO!" />
</form>

CSS

form#ios input[type=text]{
    height: 50px;
    width: 40px;
    text-align: center;
    font-size: 2em;
    border: 1px solid #000;
}

JavaScript

$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});

function showOTP()
{
	var sOTP = "";
	$('input[type="text"]').each(function(idx, elem){
  		sOTP += $(elem).val();
  });
  alert(sOTP);
}