JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<h3>Custom Select Menu Bug Example</h3><br />

<p>To reproduce:</p><br />

<ul>
    <li>Open the select and select some items</li>
    <li>Add some items using the add item button</li>
    <li>Try to select the new items</li>
    <li>Notice the difference in the newly created items</li>
    <li>Expected: Same Appearance as other items and underlying select element items should be updated</li>
</ul><br /><br />

<select id="example">
    <option>Example</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>

<a data-role="button" id="addBtn" href="#">Add Item</a>

JavaScript

(function($) {
    var $select = $('#example'),
        currOpt = 4;
    $('#addBtn').click(function() {
        $select.append('<option value="' + currOpt + '">Value ' + currOpt + '</option>');
        currOpt++;
        $select.selectmenu('refresh');
    });
})(jQuery);