title: Display results from select dropdown then clone and add another select
body: <p>So I'm building two select dropdowns where the user selects and the value is displayed above.  The user also has the ability to "Add" another dordown and select again from the same options.</p>
  
  <p>Having trouble cloning the div as well as getting the value to display.  It seems to be cloning the div multiple times. </p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="exp-display-choice"&gt;
      &lt;div class="exp-choices"&gt;
          &lt;ul class="choices"&gt;
              &lt;!-- display selctions here --&gt;
              &lt;p&gt;Results:&lt;/p&gt; 
          &lt;/ul&gt;
          &lt;ul class="ad-choices"&gt;
              &lt;li&gt;
                  &lt;select class="select" id="ad-type"&gt;
                      &lt;option value="" selected&gt;Choose Your Pet&lt;/option&gt;
                      &lt;option value="Cat"&gt;Cat&lt;/option&gt;
                      &lt;option value="Dog"&gt;Dog&lt;/option&gt;    
                      &lt;option value="Wookie"&gt;Wookie&lt;/option&gt;  
                  &lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;select class="ad-size select full-width" id="ad-size"&gt;
                      &lt;option value="" selected&gt;Choose Transportation&lt;/option&gt;
                      &lt;option value="Planes"&gt;Planes&lt;/option&gt;
                      &lt;option value="Trains"&gt;Trains&lt;/option&gt;
                      &lt;option value="Automobiles"&gt;Automobiles&lt;/option&gt;                            
                  &lt;/select&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- end of exp-choices --&gt;
  &lt;/div&gt;&lt;!-- end of exp-display-choices --&gt;
  
  &lt;a href="javascript:void(0);" class="add-btn button"&gt;Add&lt;/a&gt;        
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function displayAds(current_select) 
  {
  var adChoice = current_select.val();
  current_select.parents('.exp-choices').find('choices').append('&lt;li&gt;'+adChoice+'&lt;/li&gt;');
  }
  
  $('.exp-choices').on('change', "option:selected", function()
      {
      displayAds($(this));
      });
  
  $(".add-btn").click(function() 
  {   
  
  // grab the last exp-choices in exp-display-choice, clone it, then append to the bottom
  var $newExpChoices = $(".exp-choices").parent().children(':last').clone().appendTo($(this).parent().parent());
  
  $newExpChoices.show().insertAfter('.exp-choices');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kcw/EmX7E/" rel="nofollow">jsfiddle</a> </p>