title: jQuery clone() multiple lists and append each list to its original
body: <p>I'm trying to do something fairly simple but I'm being dense. On an event (lets say a click) I want to run through <code>.each()</code> of the <code>.article-wrap</code> divs, <code>.clone()</code> the nested <code>.articles</code> UL and <code>.apend</code> the output in <code>.clone</code> div.</p>
  
  <p><strong>Here is the HTML as it starts:</strong></p>
  
  <pre><code>&lt;div class="article-wrap"&gt;
   &lt;h3&gt;Some heading&lt;/h3&gt;
   &lt;ul class="articles"&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 01&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 02&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 03&lt;/a&gt; &lt;/li&gt;
   &lt;/ul&gt;
   &lt;div class="clone"&gt; &lt;/div&gt; 
  &lt;/div&gt;  &lt;!-- End .article-wrap --&gt;
  
  &lt;div class="article-wrap"&gt;
   &lt;h3&gt;Some heading&lt;/h3&gt;
   &lt;ul class="articles"&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 04&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 05&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 06&lt;/a&gt; &lt;/li&gt;
   &lt;/ul&gt;
   &lt;div class="clone"&gt; &lt;/div&gt;
  &lt;/div&gt;  &lt;!-- End .article-wrap --&gt;
  </code></pre>
  
  <p><strong>This is the result I am looking for:</strong></p>
  
  <pre><code>&lt;div class="article-wrap"&gt;
   &lt;h3&gt;Some heading&lt;/h3&gt;
   &lt;ul class="articles"&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 01&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 02&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 03&lt;/a&gt; &lt;/li&gt;
   &lt;/ul&gt;
   &lt;div class="clone"&gt;
     &lt;ul class="articles"&gt;
       &lt;li&gt; &lt;a href="#"&gt;Sample title number 01&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt; &lt;a href="#"&gt;Sample title number 02&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt; &lt;a href="#"&gt;Sample title number 03&lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;  &lt;!-- End .clone --&gt;
  &lt;/div&gt;  &lt;!-- End .article-wrap --&gt;
  
  &lt;div class="article-wrap"&gt;
   &lt;h3&gt;Some heading&lt;/h3&gt;
   &lt;ul class="articles"&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 04&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 05&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt; &lt;a href="#"&gt;Sample title number 06&lt;/a&gt; &lt;/li&gt;
   &lt;/ul&gt;
   &lt;div class="clone"&gt;
     &lt;ul class="articles"&gt;
       &lt;li&gt; &lt;a href="#"&gt;Sample title number 04&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt; &lt;a href="#"&gt;Sample title number 05&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt; &lt;a href="#"&gt;Sample title number 06&lt;/a&gt; &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;  &lt;!-- End .clone --&gt;
  &lt;/div&gt;  &lt;!-- End .article-wrap --&gt;
  </code></pre>
  
  <p>At the moment I have a simple script running, but it is adding both of the cloned lists to each <code>.clone</code> div. <strong>This is my JS:</strong></p>
  
  <pre><code>$(function() {
    var holder = '.article-wrap';
  
    $('#test-link').click(function() {
      $(holder).each(function() {
        $('.clone').append(
          $(this).children('ul.articles').clone()
        );
      });
    });
  });
  </code></pre>
  
  <p>I can't find how to ensure I am only output the cloned content from within each iteration of the <code>.article-wrap</code> div. At the moment, am getting all of the cloned items, as you can see her: <a href="http://jsfiddle.net/EGvMm/2/" rel="nofollow">http://jsfiddle.net/EGvMm/2/</a></p>
  
  <p>I've read a fair few other posts on a similar topic and they suggest removing the class name, but I do not wish to do this if possible. Please advise!</p>