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" /></section><section id="two"><input name="two" value="two section" /></section>';
    
    $('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 ...
        $('[id]').each(function () {
                    
            var ids = $('[id="' + this.id + '"]');
                        
            if (ids.length>1) {                    
                ids.not(this).remove();            
            }
            
            return;
             
        });

});