JSFiddle - React, Tailwind, and code Playground

HTML

<form>

</form>

JavaScript

var $input = $('<div/>').html( $('<input/>').addClass('value') );
$('form').append( $input.clone() );

var isTargetWindow = false;
$(window).blur(function(e){
    console.log('window blur');
    isTargetWindow = true;
});
$(window).focus(function(){
    isTargetWindow = false;
});

$('form').on( 'focus', 'input.value', function(e) {
    
    // Add new input if the focused one is empty
    if(!$.trim(this.value).length) {
        $('form').append( $input.clone() );
    }
    

}).on( 'blur', 'input.value', function(e) {
    
    if(!isTargetWindow){
        var $this = $(this);
        
        if( !$.trim(this.value).length ) {
            console.log('REMOVING INPUT');
            $this.parent().remove();
        } else {
            $this.attr('name', 'item-'+$this.val());
        }
    } else {
        console.log('Window instead');
    }
});