title: How to add dynamically a combobox using jQuery
body: <p>I've this working code which is creating <strong>one</strong> combobox:</p>
  
  <p>You can see it working here: <strong><a href="http://jsfiddle.net/JaVVe/6/" rel="nofollow noreferrer">jsfiddle</a></strong></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>Which is resulting something this, everytime I fill a combobox, the next one is opened.</p>
  
  <p><img src="https://i.stack.imgur.com/OWLIf.png" alt="one combobox only"></p>
  
  <p>How can I change that code to have this? Which means two comboboxes opening (please forget the <em>style</em>)</p>
  
  <p><img src="https://i.stack.imgur.com/MBcLO.png" alt="Which means two comboboxes effect"></p>
  
  <p>Thank you.</p>