JSFiddle - React, Tailwind, and code Playground

HTML

<input id="_Q0" type="text" value="" maxlength="15" style="" autocomplete="off"></input>
<input id="_Q1" type="text" value="" maxlength="15" style="" autocomplete="off"></input>
<input id="_Q2" type="text" value="" maxlength="15" style="" autocomplete="off"></input>
<input id="_Q3" type="text" value="" maxlength="15" style="" autocomplete="off"></input>
<input id="_Q4" type="text" value="" maxlength="15" style="" autocomplete="off"></input>
<input id="_Q5" type="text" value="" maxlength="15" style="" autocomplete="off"></input>

JavaScript

$(function () {
    for(var i=1;i<=5;i++){
    var t = i;
        document.getElementById("_Q" + t).style.visibility = 'hidden';
    }

    var idNumber = 0;
    document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};

    function boxAdder(){
        idNumber = idNumber+1;
        document.getElementById("_Q" + idNumber).style.visibility = 'visible';
        document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};
    }


});