JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li data-val="300"><span class="label label-morning">Morning</span></li>
    <li data-val="301"><span class="label label-afternoon">Afternoon</span></li>
    <li data-val="302"><span class="label label-evening">Evening<input id="tags_selected" type="text" value="" name="tags_selected[]"></span></li>
</ul>

<div class="tagHandler">
    <ul class="tagHandlerContainer" id="tag_handler">
    </ul>
</div>

CSS

.ul{
     width:80px;
}
.li{
     width:80px;
}
.label {
  display: block;
  margin-bottom: 5px;
}
.label-morning
{
  background-color: #B4B4B4;
}
.label-afternoon
{
  background-color: #868686;
}
.label-evening
{
  background-color: #3EBDB3;
}

.tagHandler {
    width: 100%;
    position: relative;
    top:20px;
    height:70px;
}
.tagHandler ul.tagHandlerContainer {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #C4C4C4;
    overflow: hidden;
    min-height: 70px;
    line-height: 30px;
    cursor: text;
    font-family: arial, helvetica, sans-serif;
    margin-left: 0px;
    width: 498px;
    background-color: #FFFFFF;
    height:70pxTag_add_button 
    
}

JavaScript

$(function(){
    var tags = [];
    var tags_java = [];
    function add_tag(that){
        var tag = $(that).text();
        if($.inArray(tag, tags)>=0|| tags.length >= 10) return;
        tags.push(tag);
        var singleValues = $(that).find('span').clone();
        singleValues[0].innerHTML += "&times";
        $("#tag_handler").append(singleValues);/*display the selected tags in the tag_handler with &times style*/
        tags_java.push($(that).data('val'));                                       $('input#tags_selected').val(tags_java);
    }
    
    $("li").click(function(){
        add_tag(this);
       });/*add tags to the tag_container when click the li*/
    
    $('#tag_handler').on('click', 'span', function(){
        var tag = $(this).text();
        var index = $.inArray(tag, tags);
        tags.splice(index,1);
        tags_java.splice(index,1);                    $('input#tags_selected').val(tags_java);
        $(this).remove();
        
    });/*remove the tag when click this tag in the tag_container*/
    });