Cloning and insert, inserting more times than expected
<p>I have a styled element with the class 'item' that is hidden. Initially the page will only have one element with this class. I am simply using this hidden element as a model, that I can grab with jquery and insert it into a list every time the 'add item' button is clicked, with the correct item name in the inner text. </p>

<p>What I am trying to do is clone this hidden 'item' element and insert it right after where the <strong>last</strong> item element is located on the webpage. Show it, and change the inner text to whatever I need.</p>

<p>My current implementation does not clone / insert items as expected, though I believe it should, I am probably missing something.</p>

<p>My Markup</p>

<pre><code>&lt;div class="item" style="border:1px solid blue; padding:7px; display:none;"&gt;hello&lt;/div&gt;
</code></pre>

<p>add item</p>

<p>My JavaScript</p>

<pre><code>$(".addItem").click(function(){

   //clone hidden item element blueprint
   $('.item').eq(0).clone().insertAfter('.item:last-child');


   //Change inner text of element
   $('.item:last-child').text("apples").show();
});
</code></pre>

<p><strong>JSFiddle</strong></p>

<p><a href="http://jsfiddle.net/XPVAs/" rel="nofollow">http://jsfiddle.net/XPVAs/</a></p>
