title: jQuery how to dynamically add select element and reset choice?
body: <p>I am writing a dynamic form in the Play Framework, but I'm not very experienced with javascript. I'm trying to build off of <a href="http://jsfiddle.net/aaki/hMJEy/1/" rel="nofollow noreferrer">this jQuery example</a> that allows the dynamic addition of fields. Instead of adding only a text field, I want to add a text field and a select box each time. The tricky part is that even if there is a <code>selected</code> item, I want the dynamically added select box to be reset.</p>
  
  <p>Here is my attempt to do this, using <a href="https://stackoverflow.com/questions/11365212/how-do-i-reset-a-jquery-chosen-select-option-with-jquery/11365340#11365340">this answer</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> $('.multi-field-wrapper').each(function() {
     var $wrapper=$('.multi-fields', this);
     $(".add-field", $(this)).click(function(e) {
       var obj=$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
       // This following line is incorrect...
       obj.find('.blank').prop('selected', true).end().trigger('chosen:updated');
     }
     );
     $('.multi-field .remove-field',
     $wrapper).click(function() {
       if ($('.multi-field', $wrapper).length &gt; 1) $(this).parent('.multi-field').remove();
     }
     );
   }
   );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form role="form" action="/wohoo" method="POST"&gt;
    &lt;label&gt;Stuff&lt;/label&gt;
    &lt;div class="multi-field-wrapper"&gt;
      &lt;div class="multi-fields"&gt;
        &lt;div class="multi-field"&gt;
          &lt;div&gt;
              &lt;input type="text" name="stuff[]"/&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;select&gt;
                &lt;option class="blank" value=""&gt;Select a car&lt;/option&gt;
                &lt;option value="saab"&gt;Saab&lt;/option&gt;
                &lt;option value="mercedes" selected&gt;Mercedes&lt;/option&gt;
                &lt;option value="audi"&gt;Audi&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;button type="button" class="remove-field"&gt;Remove&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="button" class="add-field"&gt;Add field&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Since it uses the <code>clone()</code> function, if "Mercedes" is selected, then dynamically added <code>select</code> dropdowns will also have "Mercedes" selected. How can I make the new <code>select</code>s display the blank choice?</p>
  
  <p>Thanks! </p>
  
  <p><strong>EDIT</strong> - updated my code to reflect the fact that my <code>input</code> and <code>select</code> tags are encapsulated by <code>div</code>s</p>