jQuery .clone() changes the reference
<p>I have a piece of XML generated by jQuery.</p>

<h2>What I want</h2>

<pre><code>&lt;booklists&gt;
    &lt;booklist&gt;
        &lt;userid&gt;0&lt;/userid&gt;
        &lt;book&gt;Foo&lt;/book&gt;
        &lt;book&gt;Bar&lt;/book&gt;
    &lt;/booklist&gt;
    &lt;booklist&gt;
        &lt;userid&gt;1&lt;/userid&gt;
        &lt;book&gt;Foo&lt;/book&gt;
        &lt;book&gt;Bar&lt;/book&gt;
    &lt;/booklist&gt;
    &lt;booklist&gt;
        &lt;userid&gt;2&lt;/userid&gt;
        &lt;book&gt;Foo&lt;/book&gt;
        &lt;book&gt;Bar&lt;/book&gt;
    &lt;/booklist&gt;
    &lt;booklist&gt;
        &lt;userid&gt;3&lt;/userid&gt;
        &lt;book&gt;Foo&lt;/book&gt;
        &lt;book&gt;Bar&lt;/book&gt;
    &lt;/booklist&gt;
    &lt;booklist&gt;
        &lt;userid&gt;4&lt;/userid&gt;
        &lt;book&gt;Foo&lt;/book&gt;
        &lt;book&gt;Bar&lt;/book&gt;
    &lt;/booklist&gt;
&lt;/booklists&gt;
</code></pre>

<h2>What I get</h2>

<pre><code>&lt;booklists&gt;
    &lt;booklist&gt;
        &lt;userid&gt;0&lt;/userid&gt;
        &lt;book&gt;Foo&lt;/book&gt;
        &lt;book&gt;Bar&lt;/book&gt;
    &lt;/booklist&gt;
    &lt;booklist&gt;
        &lt;userid&gt;4&lt;/userid&gt;
        &lt;userid&gt;3&lt;/userid&gt;
        &lt;userid&gt;2&lt;/userid&gt;
        &lt;userid&gt;1&lt;/userid&gt;
        &lt;book&gt;Foo&lt;/book&gt;
        &lt;book&gt;Bar&lt;/book&gt;
    &lt;/booklist&gt;
&lt;/booklists&gt;
</code></pre>

<h2>My code</h2>

<pre><code>lists = $('&lt;booklists /&gt;')
books = $('&lt;booklist /&gt;');

book = $('&lt;book&gt;Foo&lt;/book&gt;');
books.append(book);

book = $('&lt;book&gt;Bar&lt;/book&gt;');
books.append(book);

temp = books.clone();

for (var i = 0; i &lt; 5; i++) {
    books.prepend('&lt;userid&gt;' + i + '&lt;/userid&gt;');
    lists.append(books);
    books = temp;
}

$('.output').html(lists);
</code></pre>

<h2>Example</h2>

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