JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Form Contents</h4>

<form name="input" class="copy_form">
    <div class="copies"></div>
    <div class="line">
        <input id="current" type="text" name="content" placeholder="content" />
        <input type="button" value="Add" class="add" />
    </div>
</form>

CSS

#current {
    border: solid 1px green
}
#accepted {
    border: solid 1px gray
}

JavaScript

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});