jQuery clone() multiple lists and append each list to its original

Question

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 .each() of the .article-wrap divs, .clone() the nested .articles UL and .apend the output in .clone div.

Here is the HTML as it starts:

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 01</a> </li>
   <li> <a href="#">Sample title number 02</a> </li>
   <li> <a href="#">Sample title number 03</a> </li>
 </ul>
 <div class="clone"> </div> 
</div>  <!-- End .article-wrap -->

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 04</a> </li>
   <li> <a href="#">Sample title number 05</a> </li>
   <li> <a href="#">Sample title number 06</a> </li>
 </ul>
 <div class="clone"> </div>
</div>  <!-- End .article-wrap -->

This is the result I am looking for:

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 01</a> </li>
   <li> <a href="#">Sample title number 02</a> </li>
   <li> <a href="#">Sample title number 03</a> </li>
 </ul>
 <div class="clone">
   <ul class="articles">
     <li> <a href="#">Sample title number 01</a> </li>
     <li> <a href="#">Sample title number 02</a> </li>
     <li> <a href="#">Sample title number 03</a> </li>
    </ul>
 </div>  <!-- End .clone -->
</div>  <!-- End .article-wrap -->

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 04</a> </li>
   <li> <a href="#">Sample title number 05</a> </li>
   <li> <a href="#">Sample title number 06</a> </li>
 </ul>
 <div class="clone">
   <ul class="articles">
     <li> <a href="#">Sample title number 04</a> </li>
     <li> <a href="#">Sample title number 05</a> </li>
     <li> <a href="#">Sample title number 06</a> </li>
   </ul>
 </div>  <!-- End .clone -->
</div>  <!-- End .article-wrap -->

At the moment I have a simple script running, but it is adding both of the cloned lists to each .clone div. This is my JS:

$(function() {
  var holder = '.article-wrap';

  $('#test-link').click(function() {
    $(holder).each(function() {
      $('.clone').append(
        $(this).children('ul.articles').clone()
      );
    });
  });
});

I can't find how to ensure I am only output the cloned content from within each iteration of the .article-wrap div. At the moment, am getting all of the cloned items, as you can see her: http://jsfiddle.net/EGvMm/2/

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!

Answer 1

Use this snippet instead:

$(function() {
  var holder = '.article-wrap';

  $('#test-link').click(function() {
    $(holder).each(function() {
      $(this).find('.clone').append(
        $(this).children('ul.articles').clone()
      );
    });
  });
});