JSFiddle - React, Tailwind, and code Playground

HTML

<select id="combobox" onchange="cbchange();">
    <option selected="selected">Choose Fruit</option>
    <option value="apple">apple</option>
    <option value="pear">pear</option>
    <option value="orange">orange</option>
    <option value="banana">banana</option>
</select>
    <br>
    <br>
 <div id="buttons"></div>

CSS

.ui {
    width: 15%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#007dc1)); /*For Safari*/
    background: -o-linear-gradient(#52a8e8, #007dc1); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#52a8e8, #007dc1); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#52a8e8, #007dc1); /* Standard syntax */
    margin-left: 5px !important;
    margin-right: 10px !important;
    background-color: #007dc1 !important;
    color: #fff !important;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
    margin: 0 .125em;
    background-color: #e8e8e8;
    border-color: #e8e8e8;
    padding: .2em .8em;
    color: rgba(0,0,0,.6);
    text-transform: none;
    font-weight: 700;
    border-radius: .2857rem;
    box-sizing: border-box;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;

JavaScript

var fieldnames = [];
var valuenames = [];  
function sortComboBox() {
    document.getElementById("combobox").remove(0);
    var my_options = $("#combobox option");
    my_options.sort(function (a, b) {
    if (a.text.toUpperCase() > b.text.toUpperCase()) return 1;
    if (a.text.toUpperCase() < b.text.toUpperCase()) return -1;
    return 0;
});
$("#combobox").empty().append('<option>Choose Fruit</option>').append(my_options);
$('#combobox option:first-child').attr("selected", "selected");
}  
function cbchange() {
    var index = $('#combobox').get(0).selectedIndex;
    var text = $('#combobox option:selected').text();
    var selectedItem = $('#combobox').val();
    $('#buttons').append('<table class="ui"><tr><td class="variable">' + text + '</td><td class="icon"><span id="' + selectedItem + '" class="icon ui" value="X" onclick="addOption(\'' + text + '\',this.id)">X</span></td></tr></table>');
    $('#combobox option:eq(' + index + ')').remove();
    fieldnames.push(text);
    valuenames.push(selectedItem);
}
function addOption(text, selectedItem) {
    for (var i = valuenames.length - 1; i >= 0; i--) {
        if (valuenames[i] === selectedItem) {
            valuenames.splice(i, 1);
            fieldnames.splice(i, 1);
        }
    }
    $("#combobox").append($("<option></option>").val(selectedItem).text(text));
    $('#' + selectedItem).parent().parent().parent().parent().remove();
    sortComboBox();
}