Проброс тегов из одного текстового поля в другое и обратно

[Alex8888]

Определена текстовая область, справа от которой располагается облако тегов, позволяющее заполнять текстовую область выбирая теги из области этих тегов (Шаблон реализации приложен).

1. Добавление тегов из облака тегов в текстовую область, нажатием на тег:
а) При нажатии на тег, он добавляется в текстовую область, при этом удаляясь из облака тегов.
б) При удалении тега из текстовой области он возвращается обратно в облако тегов (при удалении тегов, добавленных в текстовую область пользователем и не входящих в облако тегов, теги просто удаляются).

2. Возможность самостоятельно добавлять теги в текстовой области, дописывая их в конце списка тегов, разделяя каждый тег между собой «; ».

Подскажите, пожалуйста, как реализовать это на js на примере

https://yadi.sk/i/PZefs5943RjsXx - шаблон реализации

[рони]

Alex8888,
как вы представляите себе пунк №2

[Dilettante_Pro]

рони,

как вы представляите себе пунк №2

По-видимому, в инпуте вписать:
Федя;Нина;Алекс

[рони]

Dilettante_Pro,
Хокку: мастер джедай быстр, молчит юный падаван, работы раздел, открыть ему надо.

[Dilettante_Pro]

Для начала процесса:

<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>

[Alex8888]

А как после того, как мы теги перенесли в текстовую область, отправить именно текст в базу данных?

Как я понимаю, это должна быть форма соответственно, с кнопкой, при нажатии на которую данные полетят в базу, однако, как это провернуть, учитывая, что по идее вместо текстовой области должен быть input или textarea, к примеру...важно чтобы отображения тегов не менялось..

[Dilettante_Pro]

Alex8888,

то должна быть форма соответственно

должен быть input или textarea

Не обязательно.
При помощи JS отправлять можно что угодно откуда угодно.
Внес добавления в пример.

[laimas]

Alex8888,
определять теги таким образом как вы описываете, есть самое худшее, что можно сделать, если все это в контексте базы.

[Dilettante_Pro]

laimas,
Честно говоря, у меня впечатление, что ТС еще не понял, что ему нужно и каким образом это реализовать.

[laimas]

Я не знаю чего он не понял или не понимает, ну вы то доки "ушлые" уже, видите же, что не в том направлении движуха. )