Add/Remove new Select w/ Options if Current Select w/ Options is selected
<p>Ok I would like to be able to add another select box with the same options if the previous select box option is selected. If it's de-selected then remove the last select box w/ options.</p>

<p>Here is what I'm trying, I can add/remove another select box with the first select box but I can't with the newly created select box.</p>

<pre><code>var counter = 1; // as we already have the first dropdown

function populate(selector) {
  $(selector)
    .append('&lt;option value="foo"&gt;foo&lt;/option&gt;')
    .append('&lt;option value="bar"&gt;bar&lt;/option&gt;')
}

populate('#select_options_1');

$("#select_options_" + counter).change( function() {
    var addNewSelect = $(this).val() != '';

    if(addNewSelect) {  
        counter++;      
        var newSelectOption = $(document.createElement('select')).attr("id", 'select_options_' + counter);

        newSelectOption.html('&lt;option value=""&gt;Please Select an Option&lt;/option&gt;' +
                             '&lt;option value="foo"&gt;foo&lt;/option&gt;' +
                             '&lt;option value="bar"&gt;bar&lt;/option&gt;');

        newSelectOption.appendTo("#select_option_groups");

    } else {
        $('#select_options_' + counter).remove();
        if(counter &gt; 1) {
          counter--;
        } 
    }
    alert('Add New Select? ' + addNewSelect + ' Counter ' + counter);
});
</code></pre>

<p>The HTML</p>

<pre><code>&lt;div name="select_option_groups" id="select_option_groups"&gt;
    &lt;select name="select_options_1" id="select_options_1"&gt;
        &lt;option value=""&gt;Please Select an Option&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>Example Code from above: <a href="http://jsfiddle.net/RaHhY/31/" rel="nofollow">http://jsfiddle.net/RaHhY/31/</a></p>
