Append Div Class to Hyperlink Class — then Clone & Append Hyperlink To Container on Click
<ol>
<li>I want to append a div class ('.link-cloner') to a hyperlink class ('.link') when you hover over <em>any</em> hyperlink (that has the '.link' class).</li>
<li>Then when you click on the appended (.link-cloner) class, I want to clone the hyperlink it was appended to, and append that (link) to #container.</li>
</ol>

<p>I'm almost there, I just can't make the last part work.</p>

<p><strong>Codepen:</strong>
<a href="http://codepen.io/StrengthandFreedom/pen/JXEEQP/" rel="nofollow">http://codepen.io/StrengthandFreedom/pen/JXEEQP/</a></p>

<p>I tried using find(), closest() &amp; $(this) in various combinations, but I can't make it just clone the hyperlink (not the linkCloner) and append it to the #container.</p>

<p><strong>jQuery:</strong></p>

<pre><code>$(document).ready(function(e) {
  /* ------------------------
    Part 1 — WORKS
  --------------------------*/
  // Store link-cloner div in variable
  var linkCloner = $('&lt;div class="link-cloner"&gt;Cloner&lt;/div&gt;');

  // When mouse hover over any hyperlink
  $('.link').on('mouseover', function() {

    // Append the link-cloner class to the hyperlink
    $(this).append(linkCloner);
  }).mouseleave(function() {

    //on mouse leave, remove link-cloner 
    $(linkCloner).remove();
  });
/* ------------------------
    Part 2 — DOESN'T WORK
  --------------------------*/
  //Then when you click on the appended linkCloner, 
  clone the hyperlink and append it to the #container
  $(linkCloner).on('click', function() {

  // This code is wrong.... 
  event.preventDefault();
  $('.link').clone().append('&lt;li&gt;&lt;/li&gt;').appendTo('#container');

  });
});
</code></pre>

<p>Can someone lead me in the right direction? JavaScript or jQuery, either is fine by me (I'm learning both) :-)</p>