Для начала процесса:
<style>
#base, #typic {
width:250px;
height:50px;
border:3px solid grey;
font-size:0px;
}
span {
background-color:green;
color:white;
margin-left: .3em;
font-size:15px;
}
</style>
<script>
window.onload = function() {
var typical = [];
[].forEach.call(document.querySelectorAll("#typic span"), function(el) {
typical.push(el.textContent);
});
document.querySelector("#typic").onclick = function(e) {
if(e.target.nodeName == "SPAN"){
document.querySelector("#base").append(e.target);
}
}
document.querySelector("#base").onclick = function(e) {
if(e.target.nodeName == "SPAN"){
if (typical.indexOf(e.target.textContent) >= 0 ) document.querySelector("#typic").append(e.target);
}
}
document.querySelector("#appn").onclick = function() {
var arr = document.querySelector("#app").value.split(";");
for(var i = 0; i < arr.length;i++) {
var el = document.createElement('span');
el.textContent = arr[i];
document.querySelector("#base").append(el);
}
}
document.querySelector("#send").onclick = function() {
alert(document.querySelector("#base").innerHTML);
}
};
</script>
<div style="display:flex">
<div id="base"><span>Рома</span><span>Денис</span></div>
<div id="typic"><span>Иван</span><span>Семен</span><span>Петр</span></div>
</div>
<input type="text" id="app">
<button id="appn">Добавить теги</button><br>
<button id="send">Отправить</button>