JQuery accordion problem
<p>Hi this is my code right now,</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
        &lt;meta charset="utf-8"&gt;
    &lt;title&gt;PineList&lt;/title&gt;
    &lt;link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"&gt;
    &lt;script src="jquery/development-bundle/jquery-1.5.1.js"&gt;&lt;/script&gt;
    &lt;script src="jquery/development-bundle/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
    &lt;script src="jquery/development-bundle/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
    &lt;script src="jquery/development-bundle/ui/jquery.ui.accordion.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="global.css"&gt;

    &lt;script&gt;

    $(document).ready(function(){ 
    accordionSetter();
    });

    function accordionSetter()
    {
       $("#plist").empty();
    }

    function test()
    {
      $(function() {

    $( "#plist" ).accordion({ 
        collapsible: true
    });
    $("#plist").accordion("activate",false);
    });
 }

function playlistClick(pr)
{
    $(pr.parentNode.children(1)).append('&lt;li&gt;Testing&lt;/li&gt;');
    test();
}

function inject()
{
    $("#plist").append('&lt;li class="plname"&gt;&lt;a href="#"&gt;Playlist 1&lt;/a&gt;&lt;ul      class="songlist" onclick="javascript:playlistClick(this)"&gt;&lt;li&gt; Song 1&lt;/li&gt;&lt;/ul&gt;   &lt;/li&gt;').accordion('destroy').accordion();
    test();
}
&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;button onclick="javascript:accordionSetter()"&gt; Killer &lt;/button&gt;
    &lt;button onclick="javascript:inject()"&gt; Testing insert &lt;/button&gt;

    &lt;div id="listedPlays"&gt;
    &lt;ul id="plist" /&gt;
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>so this is the issue if you run this, you will realise that when new items get added to the playlist items, then the data of the parent overlaps the data of the next playlist item. Can u please help me out.</p>

<p>thanks</p>
