JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
    <div id="mail">
        <div class="container" id="email">
            <label for="email_address">Email address: </label>
            <div>
                <input type="text" name="email_address" id="email_address"  />
                <span class="remove">remove</span>
            </div>
        </div>
    </div>
    <div class="container">
        <input type="button" id="button" name="button" value="click me" />
    </div>
</div>

CSS

ul ul {
    padding-left: 10px;
}

JavaScript

$(document).ready(function() {

    $("span.remove").click(function() {
        $(this).parents("div.container").remove();
    });


    var count = 0;

    $('#button').attr('disabled', '');
    $('#button').click(function() {
        count++;
        alert(count);
        var test = $('#email.container').clone(true).attr('id', 'email_' + count).appendTo('#mail');
        test.children(':nth-child(2)').children(':first').attr('id', 'mail_' + count);

        if (count == 3) {
            $('#button').attr('disabled', 'disabled');
        }

    });
});