Adding to list dynamically within a loop
<p>In this fiddle buttons are appended to dynamically within a loop. How can the code be updated so that that each button is added just once in the loop instead of multiple times ? I think this is because of the clone method ?</p>

<p><a href="http://jsfiddle.net/8JXTT/9/" rel="nofollow">http://jsfiddle.net/8JXTT/9/</a></p>

<p>Fiddle code : </p>

<pre><code>&lt;div data-role="page" id="firstpage"&gt;

        &lt;div data-role="header"&gt;
                &lt;h1&gt;First Page&lt;/h1&gt;
        &lt;/div&gt;

&lt;div data-role="content" id="links"&gt;
        &lt;a href="#secondpage" data-role="button"&gt;Link button&lt;/a&gt;
&lt;/div&gt;

        &lt;div data-role="footer"&gt;
                &lt;h4&gt;Page Footer&lt;/h4&gt;
        &lt;/div&gt;

&lt;/div&gt;

&lt;div data-role="page" id="secondpage"&gt;

        &lt;div data-role="header"&gt;
                &lt;a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false"&gt;Back&lt;/a&gt;&lt;h1&gt;Bar&lt;/h1&gt;&lt;a href="#firstpage"&gt;home&lt;/a&gt;
        &lt;/div&gt;

        &lt;div data-role="content"&gt;
                &lt;p&gt;I'm first in the source order so I'm shown as the page. (this is secondpage)&lt;/p&gt;
                &lt;p&gt;&lt;a href="#thirdpage"&gt;Go to third page&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;

        &lt;div data-role="footer"&gt;
                &lt;h4&gt;Page Footer&lt;/h4&gt;
        &lt;/div&gt;
&lt;/div&gt;
​
$(document).ready(function() {

    for (var i = 0; i &lt; 4; i++) {
    var linkButton = $('#links a').clone(true);
    linkButton.find('span.ui-btn-text').text('Link Button2');
    $('#links').append(linkButton);
}

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