title: jQuery clone iterative divs on hover
body: <p>I have a series of divs that I want to clone and show/hide on hover to a different div. Although I've figured out how to clone one <em>or</em> all with jQuery, I'm quite stuck on how to clone each iteratively.</p>
  
  <p>The HTML, essentially:</p>
  
  <pre><code>&lt;div id="test"&gt;
    &lt;div id="source1" class="src"&gt;content1&lt;/div&gt;
    &lt;div id="source2" class="src"&gt;content2&lt;/div&gt;
    &lt;div id="source3" class="src"&gt;content3&lt;/div&gt;      
  &lt;/div&gt;
  
  &lt;div id="dest"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm thinking the answer probably involves an <em>each</em> function; however the following script errors with "second argument to Function.prototype.apply must be an array" for jquery.min.js:</p>
  
  <pre><code>$(".src").hover(function() {
   $(".src").each(function() {
    $(this).clone().appendTo('#dest');
    return false;
    $('#dest').show();        
   }, function() {
    $('#dest').hide();
    $('#dest').html('');
   });
  });
  </code></pre>
  
  <p>This bit does work nicely to clone <em>every</em> (not each) .src div on hover, however:</p>
  
  <pre><code>$('.src').hover(function() {
      $('.src').clone().appendTo('#dest');
      $('#dest').show();
  }, function() {
      $('#dest').hide();
      $('#dest').html('');
  }); 
  </code></pre>
  
  <p>So, to recap, I want each .src div to be cloned to the #dest div when I hover over it, then disappear when I mouse out. Then the next .src div should do the same thing on hover, and so on...without a separate script for each sourceN div. Please, oh wise ones, what am I doing wrong?</p>