JSFiddle - React, Tailwind, and code Playground

HTML

<span class="placeholder">Click me for new inputs</span>

<form>
    <section id="e1">
        <input name="e1name" value="sample" />
    </section>
</form>

JavaScript

$('body').on("click", ".placeholder", function() {

    data = ['<section id="e1"><input name="e1name" value="one"/></section>',
            '<section id="e1"><input name="e1name" value="two"/></section>',
            '<section id="e1"><input name="e1name" value="four"/></section>',
            '<section id="two"><input name="five" value="five" /></section>'].join('');
    
    $('form').append(data);

    // ideally I'd like to run this function after append but after googling I find that's not possible.
    // for each ID ...
    var duplicated = {};
    
    $('[id]').each(function () {   
        
        var ids = $('[id="' + this.id + '"]');
        
        if ( ids.length <= 1 ) return  ;
        
        if ( !duplicated[ this.id ] ){
             duplicated[ this.id ] = [];   
        }       
        
        duplicated[ this.id ].push( this );
  
    });
    
    // remove duplicate last ID, for elems > 1 
    for ( var i in duplicated){
        
        if ( duplicated.hasOwnProperty(i) ){                            
                 $( duplicated[i].pop() ).remove();            
        }
    }
   
});