title: Clone form elements, then wrap them in a div, then append?
body: <p>I'm getting all the inputs from a form and cloning them into another form.  This is working great (with the fix of jquery.fix.clone.js).  I'm now simply trying to wrap the elements into a div, which isnt working because jquery always adds the other half of the tag, like <code>&lt;div&gt;&lt;/div&gt;</code></p>
  
  <pre><code>addbutt = $("form.prodform button.add");
      addbutt.click(function(e){
          e.preventDefault();
          theform = $(this).closest('form');
          $(theform).each(function(){
              //lets validate,then we add
              $('form#Receiver').append('&lt;div class="appended"&gt;');
              $('form#Receiver').append($(this).find('div.name') .clone());
              $('form#Receiver').append($(this).find(':input').not(':button') .clone());
              $('form#Receiver').append('&lt;button&gt;delete&lt;/button&gt;');           
              $('form#Receiver').append('&lt;/div&gt;');
          });
      })
  </code></pre>
  
  <p>I tried using html() to get the found inputs, but this just gets the input, not the value.
  Tried like this:</p>
  
  <pre><code>inputs = $(this).find(':input').not(':button');
              $.each(inputs, function(i, val){
                  inouts = inouts + $(val).prop('outerHTML');
              });
  </code></pre>
  
  <p>Also tried many variations on <code>$('form#Receiver').append($(this).find('.name') .clone().html())</code></p>
  
  <p>So, I know what I need to do is find my inputs and clone them...into my wrapper div.  How can I store the cloned elements, to put them in a div, like:</p>
  
  <pre><code>$('form#Receiver').append('&lt;div class="appended"&gt;' + namediv + inputs + '&lt;/div&gt;');
  </code></pre>
  
  <p>Here is the working result, thanks @Derek Story </p>
  
  <pre><code>addbutt = $("form.prodform button.add");
  addbutt.click(function(e){
      var inputs = [];
      var divs = [];
      var theform = $(this).closest('form');
      e.preventDefault();     
      theform.find(':input').not(':button').each(function() {//using :intput cuz it might be selects, etc.
        inputs.push($(this).clone());
      });
      theform.find('div.name').each(function() {
        divs.push($(this).clone());
      });
  
      var container = $('&lt;div class="appended" /&gt;').append(divs, inputs);
      $('form#Receiver').append(container);
  })
  </code></pre>
  
  <p>And let me add, in order for clone() to work on selects and textareas, you need this <a href="https://github.com/spencertipping/jquery.fix.clone" rel="nofollow">https://github.com/spencertipping/jquery.fix.clone</a> </p>