PHP Roster only showing one player on click - php

Question

I am trying to put together a guild roster for my WoW guilds website. I have the roster pulling all of the right information and listing it in a table properly. The next step is to pop up a modal and display more information when clicking on one of my guild members names in the list.
Unfortunately, when I click on anyone's name in the list it only displays information of the first person in the list. Can someone please help me understand what I am doing wrong?
So you can see what I mean, go to the following link and click on any random players name in the table. No matter who you choose, it will display information about "Alisyn":
http://www.astalder.net/roster.php
Here is part of the code:
//Guild Roster Table Headers
echo " <div width='600px' align#'center'>";
echo '
<div align="center" id="roster" class="roster" style="float: none;">
<table class="warcraft sortable" border="3" cellspacing="0" cellpadding="0" align="center">
<tr>
<th width="80px" align="center" valign="top" ><strong>Race/Class</strong></a></th>
<th width="140px" align="center" valign="top" ><strong>Name</strong></a></th>
<th width="80px" align="center" valign="top" ><strong>Level</strong></a></th>
<th width="140px" align="center" valign="top" ><strong>Rank</strong></a></th>
<!-- <th width="80px" align="center" valign="top" ><strong>Message</strong></a></th> -->
</tr>';
//Character Arrays
foreach($rows as $p) {
$mrank = $p['rank'];
$mname = $p['name'];
$mclass = $p['class'];
$mrace = $p['race'];
$mlevel = $p['level'];
$mgender = $p['gender'];
$mthumbnail = $p['thumbnail'];
echo "<div id='myModal' class='reveal-modal'>
<h1><center>Details for " . $mname . "</center></h1>
<p>Name: " . $mname . "<br />
Class: " . $mclass . "<br /></p>
<a class='close-reveal-modal'>×</a>
</div>";
//#$json = file_get_contents("http://$region.battle.net/api/wow/character/$realm/$mname?fields=items", true);
//$decode = json_decode($json, true);
//$milvl = " ". $decode['items']['averageItemLevel'] . "";
//Table of Guild Members
echo "
<tr>
<td align='center'><strong><img style=\"padding-left: 5px;\" src=\"race/race_$mrace-$mgender.jpg\"></img><img style=\"padding-left: 5px;\" src=\"class/class_$mclass.jpg\"></img></strong></td>
<!-- <td class='class_$mclass' width=\"140px\" align=\"center\" valign=\"top\" ><div class=\"hover_img\"><strong>$mname<span><img src=\"http://us.battle.net/static-render/us/$mthumbnail\" alt=\"$mname\" height=\"100\"></span></strong></div></td> -->
<td class='class_$mclass' width=\"140px\" align=\"center\" valign=\"top\" ><div class=\"hover_img\"><strong>$mname<span><img src=\"http://us.battle.net/static-render/us/$mthumbnail\" alt=\"$mname\" height=\"100\"></span></strong></div></td>
<td width=\"80px\" align=\"center\" valign=\"top\" ><strong>$mlevel</strong></td>
<td sorttable_customkey='$mrank' width=\"140px\" align=\"center\" valign=\"top\" ><strong>$ranks[$mrank]</strong></td>
<!-- <td width=\"90px\" aligh=\"center\" valign=\"top\" ><div class=\"hover_img\"><img src=\"http://us.battle.net/static-render/us/$mthumbnail\"></div></td> -->
</tr>
";
}
echo " </table></div>";

Answer 1

Reference the rows by their unique id's. Hence when you click the name, the respective ID will be called and the player info will be displayed as per that id:
//Guild Roster Table Headers
echo " <div width='600px' align#'center'>";
echo '
<div align="center" id="roster" class="roster" style="float: none;">
<table class="warcraft sortable" border="3" cellspacing="0" cellpadding="0" align="center">
<tr>
<th width="80px" align="center" valign="top" ><strong>Race/Class</strong></a></th>
<th width="140px" align="center" valign="top" ><strong>Name</strong></a></th>
<th width="80px" align="center" valign="top" ><strong>Level</strong></a></th>
<th width="140px" align="center" valign="top" ><strong>Rank</strong></a></th>
<!-- <th width="80px" align="center" valign="top" ><strong>Message</strong></a></th> -->
</tr>';
//Character Arrays
foreach($rows as $i=>$p) {
$mrank = $p['rank'];
$mname = $p['name'];
$mclass = $p['class'];
$mrace = $p['race'];
$mlevel = $p['level'];
$mgender = $p['gender'];
$mthumbnail = $p['thumbnail'];
echo "<div id='myModal_$i' class='reveal-modal'>
<h1><center>Details for " . $mname . "</center></h1>
<p>Name: " . $mname . "<br />
Class: " . $mclass . "<br /></p>
<a class='close-reveal-modal'>×</a>
</div>";
//#$json = file_get_contents("http://$region.battle.net/api/wow/character/$realm/$mname?fields=items", true);
//$decode = json_decode($json, true);
//$milvl = " ". $decode['items']['averageItemLevel'] . "";
//Table of Guild Members
echo "
<tr>
<td align='center'><strong><img style=\"padding-left: 5px;\" src=\"race/race_$mrace-$mgender.jpg\"></img><img style=\"padding-left: 5px;\" src=\"class/class_$mclass.jpg\"></img></strong></td>
<!-- <td class='class_$mclass' width=\"140px\" align=\"center\" valign=\"top\" ><div class=\"hover_img\"><strong>$mname<span><img src=\"http://us.battle.net/static-render/us/$mthumbnail\" alt=\"$mname\" height=\"100\"></span></strong></div></td> -->
<td class='class_$mclass' width=\"140px\" align=\"center\" valign=\"top\" ><div class=\"hover_img\"><strong>$mname<span><img src=\"http://us.battle.net/static-render/us/$mthumbnail\" alt=\"$mname\" height=\"100\"></span></strong></div></td>
<td width=\"80px\" align=\"center\" valign=\"top\" ><strong>$mlevel</strong></td>
<td sorttable_customkey='$mrank' width=\"140px\" align=\"center\" valign=\"top\" ><strong>$ranks[$mrank]</strong></td>
<!-- <td width=\"90px\" aligh=\"center\" valign=\"top\" ><div class=\"hover_img\"><img src=\"http://us.battle.net/static-render/us/$mthumbnail\"></div></td> -->
</tr>
";
}
echo " </table></div>";