JQuery and Dynamic sub list on separate div
<p>I am trying to create a sub listview page separate from the typical caged one:</p>

<p>This is what I'm trying to do:</p>

<p>STEP1 - Loops gets all the data and creates the list in the listview:</p>

<pre><code>$(document).ready(function() {

     var data = {"id":[{"id":1,"title":"title1","bodytext":"sometext 1"},{"id":2,"title":"title2","bodytext":"sometext 2"},{"id":3,"title":"title3","bodytext":"sometext 3"}
                   }]

    var output = ''

    $.each(data.id, function(index, value){

       output += '&lt;li&gt;&lt;a href="#mypage"&gt;'+value.title+'&lt;/a&gt;&lt;/li&gt;';

       $('#mypage').text(value.title); //will this be different for each item?

    });

    $('#mylistview').html(output).listview('refresh'); //Refresh the listview with new added data

});
</code></pre>

<p>STEP 2:</p>

<p>The listview now looks like this:</p>

<pre><code>&lt;ul id-"mylistview"&gt;
   &lt;li&gt;&lt;a href="populate_#mypage_with_data_from_item_1"&gt;title1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="populate_#mypage_with_data_from_item_2"&gt;title2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="populate_#mypage_with_data_from_item_3"&gt;title3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>STEP 3:</p>

<p>I have a pre-made template:</p>

<pre><code>&lt;div id="mypage"&gt;
Data from selected item goes here
&lt;/div&gt;

So, if I click on list item 1 mypage will look like this:

&lt;div id="mypage"&gt;
Sometext 1
&lt;/div&gt;

or if item 2 is clicked:

&lt;div id="mypage"&gt;
Sometext 2
&lt;/div&gt;
</code></pre>

<p>My problem is that  no matter which item I click in the listview I always get the data from item 1.</p>

<p>How can I maker it so each item has it's own data displayed?</p>
