JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function textChange(){
    var inputNumber = $(event.target).attr('id').split("txt")[1];
    $("#txt" + ++inputNumber).css("display", "block");
}
</script>
<from>
    <input type="text" id="txt1" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt2" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt3" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt4" onchange="textChange()" />
    <input type="text" style="display:none;" id="txt5" onchange="textChange()" />
</form>