JSFiddle - React, Tailwind, and code Playground

by eddiemonge

HTML

<form id='sampleform' method='post' action='' >
    <div id="name">
        <p>
            Name: <input type='text' name='Name' />
        </p>
    </div>
    <div id="emailHolder"> 
        <p>
            <label>Email: <input type='email' name='email[]' /></label> 
            <button class="removeEmail" type="button">Remove Email</button>
        </p>
        <button id="addEmail" type="button">Add An Email</button>
    </div>
    <p>
        <input type='submit' name='Submit' value='Submit' />
    </p>
    
</form>

JavaScript

$(document).ready(function() {
    $('#emailHolder').delegate('.removeEmail', 'click', function(e) {
        e.preventDefault();
        $(this).parent().remove();
    });
    
    $('#addEmail').click(function(e) {
        e.preventDefault();
        $('<p><label>Email: <input type="email" name="email[]" /></label><button class="removeEmail" type="button">Remove Email</button></p>').insertBefore(this);
    });
});