JSFiddle - React, Tailwind, and code Playground

HTML

<div><span>Main Tag:</span><br/>
<select id="tagSel_main">
  <option value="tag1">Tag 1</option>
  <option value="tag2">Tag 2</option>
  <option value="tag3">Tag 3</option>
  <option value="tag4">Tag 4</option>
  <option value="tag5">Tag 5</option>
</select>
</div>

<div class="sub_tags">
<div>
<span>Sub Tag:</span><br/>
<select id="tagSel" multiple>
  <option value="tag1">Tag 1</option>
  <option value="tag2">Tag 2</option>
  <option value="tag3">Tag 3</option>
  <option value="tag4">Tag 4</option>
  <option value="tag5">Tag 5</option>
</select>
</div>

<div>
    Selected Sub Tags:<br/>
<div class="tags">
  <p id="tags"></p>
</div>
</div>
</div>

CSS

* {  font-family: 'Segoe UI';  font-size: 10pt;}
body > div{  display:inline-block; width:20%; vertical-align:top ;  height:100px;  background-color: bisque;  padding: 10px;}
.sub_tags{display:inline-block; width:60%;     background-color: bisque; padding: 10px;}
.sub_tags > div {width:40%; display:inline-block; vertical-align:top}
.tags {   display:inline-block;   width:100%}
.tags p {  margin: 0;}
.tags span {
  display: inline-block;
  padding: 3px 9px;
  background: #E4E4E4;
  border: solid 1px #A0A054;
  border-radius: 5px;
  margin:5px 
}
.tags span a {
  color: red;
  text-decoration: none;
  background-color: white;
  padding: 2px 5px;
  border-radius: 16px;
  font-size: 12px;
}

JavaScript

$(function () {
	$("#tagSel").change(function () {
		$this = $(this);
		$("#tags").append('<span id="' + $this.val() + '"> ' + $this.find('option:selected').text() + ' <a href="#">&times;</a></span>');
		$this.find('option:selected').prop("disabled", true);
	});
	$("#tags").on("click", "span a", function () {
		$("#tagSel option[value='" + $(this).parent().attr("id") + "']").prop('disabled',null);
		$(this).parent().remove();
        $("#tagSel_main").append('<i ></i>')
	});
});