JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.4/js/bootstrap-select.min.js"></script>
<select id="myselect">
    <option value="1">Mustard</option>
    <option value="2">Ketchup</option>
</select>
<div>
    <a id="add-relish-button" class="btn btn-primary">Add and select 'Relish' option</a>
</div>
<div>
    <a id="add-soy-sauce-button" class="btn btn-primary">Add and select 'Soy Sauce' option</a>
</div>

JavaScript

$("#myselect").selectpicker();

$("#add-relish-button").click(function () {
    var newitemnum = 3;
    var newitemdesc = "Relish";
    $("#myselect").append('<option value="'+newitemnum+'" selected="">'+newitemdesc+'</option>');
    $("#myselect").selectpicker("refresh");
});

$("#add-soy-sauce-button").click(function () {
    var newitemnum = 4;
    var newitemdesc = "Soy Sauce";
    $("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
    $("#myselect").val(4);
    $("#myselect").selectpicker("refresh");
});