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');

$('.copy_form')
    .on('click', '.add', function () {
    if ($('.line').size() < 10) {
        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('');
    }else{
        alert('Only 10 allowed.');
    }
}).on('click', '.remove', function () {
    $(this).parents('.line').remove();
});