How to handle with jQuery dropdown
<p><br></p>

<p>Html</p>

<pre><code> &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;
</code></pre>

<p>jQuery</p>

<pre><code>$('body').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();
        $('body').append(newComboBox);
    }
}
});
</code></pre>

<p><a href="http://jsfiddle.net/JaVVe/6/" rel="nofollow">Fiddle</a></p>

<p>This code is working and is creating a new combobox everytime the one before is filled.</p>

<p>How can I have a linebreak every two dropdown? like this:</p>

<p><img src="http://i.stack.imgur.com/3SQS5.png" alt="enter image description here"></p>

<p>And how can I force it to fill always an even number of comboboxes. Eg. If it is only 3 combobox filled, must alert error.</p>

<p>Cheers and happy new year!</p>
