JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log"></div>

<div id="divContent">
    <input type="text" name="txt1" onKeyUp="addInputBox(this);"></input>
</div>

CSS

input
{
    margin-bottom: 10px;
    width: 260px;
    height: 20px;
}

input::after
{
    content: '<br />';
}

#log
{
    margin-bottom:10px;    
}

JavaScript

var count = 2; 
var txtAdded = false, txtRemoved = false;

function addInputBox(txtBox)
{    
    //check for any characters
    var txtLen = $(txtBox).val().length;
    
    if(txtLen > 0 && txtAdded == false)
    {
        //chars present, add textbox 
        $('#divContent').append("<input type='text' " +
            "name='txt" + count + "' onKeyUp='addInputBox(this);' " + 
            "' onFocus='javascript:txtAdded = false;' " + 
            "id='txt" + count + "'</input>");
                                
        //set stage for next event
        txtAdded = true;
        txtRemoved = false;
        
        log('added ' + count);
        
        count++;
    }
    if(txtLen == 0 && txtRemoved == false)
    {
        count--;
        //no chars, remove txtbox here.
        $('input#txt' + count).remove();
        
        //prepare for next possibility
        txtAdded = false;
        txtRemoved = true;
        
       log('removed ' + count);
        
    }
 
}


function log(msg)
{
    $('div#log').html(msg);
}