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 + '"]');
                
            // remove duplicate IDs
            if (ids.length > 1 && ids[0] == this) $('#' + this.id).remove();
        
        });

});