JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-sm-3">
  <div class="form-group">
    <label class="control-label">Food Type</label><br>
    <span id="tags" onclick="addOption()"></span>

    <select id="tag" onchange="addTag(this)" class="form-control">
      <option value="">-All-</option>
      <option value="Fast Food">Fast Food</option>
      <option value="Vegan">Vegan</option>
      <option value="Food">Food</option>
    </select>
  </div>
</div>

JavaScript

function addTag(tag) {
  var tags = document.getElementById("tags");
  var span = document.createElement("span");
  span.textContent = tag.value;
  tag.value = ""; //clear the field when choose or pressed enter key
  span.style.backgroundColor = "#E5E6E7";
  span.style.margin = " 5px";
  span.style.padding = "5px";
  span.setAttribute("onclick", "this.remove()");

  if (span.textContent == "Fast Food") {
    $('option[value="Fast Food"]').remove();
  } else if (span.textContent == "Vegan") {
    $('option[value="Vegan"]').remove();
  } else {
    $('option[value="Food"]').remove();
  }

  tags.append(span);
}

function addOption() {
  var x = document.getElementById("tag");
  var option = document.createElement("option");
  option.textContent = tags.textContent;
  x.add(option);
}