How to handle with different dynamic comboboxes?
<p>Html</p>

<pre><code>&lt;div id="opts" class="styled-select"&gt;
 &lt;select id="combo1" class="combo" data-index="1"&gt;
        &lt;option&gt;&lt;/option&gt;
        &lt;option val="Opt1"&gt;Opt1&lt;/option&gt;
        &lt;option val="Opt2"&gt;Opt2&lt;/option&gt;
        &lt;option val="Opt3"&gt;Opt3&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;



&lt;div id="opts2" class="styled-select"&gt;
  &lt;select id="combo2" class="combo2" data-index="1"&gt;
            &lt;option&gt;&lt;/option&gt;
            &lt;option val="Opt11"&gt;Opt11&lt;/option&gt;
            &lt;option val="Opt22"&gt;Opt22&lt;/option&gt;
            &lt;option val="Opt32"&gt;Opt33&lt;/option&gt;
        &lt;/select&gt;
 &lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$('#opts').on('change', '.combo', function() {
    var selectedValue = $(this).val();

    if ($(this).find('option').size() &gt; 2) {
        var newComboBox = $(this).clone();
        var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
        var newComboBoxIndex = thisComboBoxIndex + 1;

        $('.parentCombo' + thisComboBoxIndex).remove();

        if (selectedValue !== '') {
            newComboBox.attr('data-index', newComboBoxIndex);
            newComboBox.attr('id', 'combo' + newComboBoxIndex);
            newComboBox.addClass('parentCombo' + thisComboBoxIndex);
            newComboBox.find('option[val="' + selectedValue + '"]').remove();
            $('#opts').append(newComboBox);
        }
    }
});​
</code></pre>

<p>I can't duplicate/use the same code for 2 different comboboxes, it seems to cause some kind of trouble.</p>

<p>How can I have the same "effect" for 2 comboboxes?</p>

<p>Cheers.</p>
