JSFiddle - React, Tailwind, and code Playground

HTML

<select id="ddlTagName">
	<option value="1">Tag One</option>
	<option value="2">Tag Two</option>
	<option value="3">Tag Three</option>
</select>
<input id="btnInsertTag" type="button" value="Add"/>
<br/>

<div id="TagsHolder">
  <span class="tag">
      <span>Tag One HardCoded </span>
      <a class="remove">X</a>
  </span>
    
  <span class="tag">
      <span>Tag Two HardCoded </span>
      <a class="remove">X</a>
  </span>
</div>

CSS

#prodcutsTagsHolder{
    width:98%; 
    border: 1px solid #ccc; 
    padding:5px 2% 5px 2%; 
    float:left;
    margin-left:1%;
    margin-right:1%;    
}

span.tag
{
border: 1px solid #A5D24A;
text-shadow: 1px 1px 0px rgba(238, 247, 221, 1);
display: block;
float: left;
padding: 5px;
text-decoration: none;
background: none repeat scroll 0% 0% #CDE69C;
color: #638421;
margin-right: 5px;
margin-bottom: 5px;
font-family: helvetica;
}

span.tag a
{    
position: relative;
top: -7px;
right: -3px;
font-weight: bold;
color: #82AD2B;
text-decoration: none;
font-size:10px;
cursor:pointer;
}

JavaScript

$("#btnInsertTag").click(function () {
    var selectedTagText = $("#ddlTagName option:selected").text();
    var selectedTagValue = $('#ddlTagName').val();
    var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>';
    $("#TagsHolder").append(generateMarkup);
});

$(".remove").click(function () {
    alert('click event triggered');
    $(this).parent(".tag").remove();
});