JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jquerymobile.com/demos/1.0rc3/jquery.mobile-1.0rc3.min.css">
<script src="http://jquerymobile.com/demos/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<div data-role="page" id="page_1">
    <div id="select_option_groups">

            <select name="select_options_1">
                <option value="" selected>Please select an option</option>
                <option value="foo">Foo</option>
                <option value="bar">Bar</option>
            </select>

    </div>
</div>

JavaScript

$(function(){
    var counter = 2;
    var onChange = function(e){
        val = $(':selected',this).val() || '';
        if (val != ''){
            // they may be able to toggle between valid options, too.
            // let's avoid that using a class we can apply
            var c = 'alreadyMadeASelection';
            if ($(this).hasClass(c))
                return;
            // now take the current select and clone it, then rename it
            var newSelect = $(this)
                .clone()
                .attr('name','select_options_'+counter)
                .attr('id','select_options_'+counter)
                .appendTo('#select_option_groups')
                .change(onChange);
            $(this).addClass(c);
            counter++;
        } else {
            var id = $(this).attr('name').match(/\d+$/), parent = $(this).parent();
            $(this).parent().parent().remove();
            
            // re-order the counter (we don't want missing numbers in the middle)
            $('select',parent).each(function(){
                var iid = $(this).attr('name').match(/\d+$/);
                if (iid>id)
                    $(this).attr('name','select_options_'+(iid-1));
            });
            counter--;
        }
        $('#page_1').trigger('create');
    };
    $('#select_option_groups select').change(onChange);    
});