Having trouble with jQueryMobile Popups in Listview

Question

So I'm trying to make a thumbnail list view and when user clicks on one button they get a different popup in each button but my problem is that every button displays the same info from the first popup in every button on list. What am i doing wrong?

<div data-role="listview">
  <li>
                <a href="#codeSample" data-rel="popup" data-transition="slide" data-position-to="codeSample">
                <h1>Song1</h1>
                <img src="image" />
                <p>Artist1</p></a>

<div data-role="popup" id="codeSample">

  <p>Artist1 Bio</p>
</div>

  </li>
    <li>
                <a href="#codeSample" data-rel="popup" data-transition="slide" data-position-to="codeSample">
                <h1>Song2</h1>
                <img src="image" />
                <p>Artist2</p></a>

<div data-role="popup" id="codeSample">

  <p>Artist2 Bio</p>
</div>

  </li>

</div>

Answer 1

You need to give your popups different ids.

You have:

<div data-role="popup" id="codeSample">

for both popups.

Give them a different id and call the desired id appropriately.