JSFiddle - React, Tailwind, and code Playground

by skip405

HTML

<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(){
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="Remove" class="remove" />' +
        '</div>';
        
        $(html).appendTo(container);
        value_src.val('');
    })
    .on('click', '.remove', function(){
        $(this).parents('.line').remove();
    });