JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" class="chosen-select" tabindex="8" multiple>
            <option value=""></option>
            <option>American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option>Brown Bear</option>
            <option>Giant Panda</option>
            <option selected>Sloth Bear</option>
            <option>Sun Bear</option>
            <option selected>Polar Bear</option>
            <option>Spectacled Bear</option>
          </select>
<br> <br>
<input type="text" id="newTag"></input>
    <button id="submitNewTag">Add new option</button>

JavaScript

$(".chosen-select").chosen({
    width: "100%"
});

$("#submitNewTag").on("click", function() {
    var newTag = $("#newTag").val();
    addNewOption(newTag);
});

function addNewOption(option) {
        $(".chosen-select").append("<option>" + option + "</option>");
    $(".chosen-select").trigger("chosen:updated");
}