jQuery appends a paragraph twice
<p>I'm creating a jquery animation and weirdly, when I append a new paragraph, it appends it twice, the problem only happens when 2 previous paragraphs are appended, probably that's a jQuery bug.. otherwise, I hope someone can help me. </p>

<p>HTML:</p>

<pre><code>&lt;body&gt;
    &lt;div id="element"&gt;
     &lt;/div&gt;
&lt;/body&gt;​ 
</code></pre>

<p>JavaScript:
</p>

<pre><code>$(function() {
    animation();
});

function animation()
{
   $('&lt;p id="p1"&gt;paragraph 1&lt;/p&gt;').appendTo('#element');
   $('&lt;p id="p2"&gt;paragraph 2&lt;/p&gt;').appendTo('#element');
   $('#p1, #p2').fadeOut(600, function(){
       $('#p1, #p2').remove();
       var $p3 = $('&lt;p&gt;paragraph 3 &lt;/p&gt;').appendTo('#element');
   });
}​
</code></pre>

<p>The problem is with "paragraph 3" that is appended twice!
You can run the code here:
<a href="http://jsfiddle.net/jonah13/QLM2s/" rel="nofollow">http://jsfiddle.net/jonah13/QLM2s/</a></p>

<p>Thanks,
Younes</p>
