JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>add/remove</title>
    </head>
    <body>
        <div id="items">
            <span class="a" attr="1"><a href="#" class="remove">Удалить</a></span>
            <span class="a" attr="2"><a href="#" class="remove">Удалить</a></span>
            <span class="a" attr="3"><a href="#" class="remove">Удалить</a></span>
        </div>
        <div><a id="add" href="#">Добавить</a></div>
        <div id="container">
        </div>
    </body>
</html>

CSS

span {display:inline-block; margin:10px;}
#items, #container {border:1px solid black;}
#items span a {
    background:#dff;
}
a#add {
    background:#ffd;
}
#container span {background:#fdf;}

JavaScript

$(document).ready(function(){
    var item = '<span class="a" attr="new"><a href="#" class="remove">Удалить</a></span>';
    $('.remove').click(function(){
        $(this).parents('span').remove();
        attr = $(this).parents('span').attr('attr');
        if (attr != 'new') $('#container').append('<span>'+attr+'</span>');
    });
    $('#add').click(function(){
        $('#items').append(item);
        $('.remove').click(function(){
            $(this).parents('span').remove();
            attr = $(this).parents('span').attr('attr');
            if (attr != 'new') $('#container').append('<span>'+attr+'</span>');
        });
    });
});