jquery inside a while statement - php

Question

I am trying to create a drop down menu that shows more information about each person displayed when the person is clicked on.
//Get users information
$sql = "SELECT user.uid, user.first, user.last, user.email, user.rating
FROM user
INNER JOIN team_members ON user.uid=team_members.uid
WHERE tid = '$tid'
ORDER BY user.last ASC";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
//name as button(displayed on page load)
echo "<button class='player' type='submit'>
".$row["first"]." ".$row["last"]."</button><br>";
//hidden information to be shown once button clicked
echo "<div class='player_info' style='display:none'>
".$row["email"]." ".$row["rating"]."
</div>";
}
$(document).ready(function(){
$('button.player').click(function(){
$('div.player_info').toggle();
});
});
The issue I am having is that when clicked it displays all information in each loop. So if there are 5 people and you click one name, each person populates information. The information corresponds to each person but I only want to show the info of the person clicked.
I thought this would mean that I need to somehow uniquely identify each class but cant seem to figure it out and make it work. Or maybe there is a better way to run my loop to solve the problem. Any input is appreciated. Thank you.

Answer 1

You can use HTML data- attributes to correlate each button to a div. Then modify the JavaScript to use the embedded data.
In the below snippet, I added data-uid attributes to both the button and the div that are populated with the uid from the database.
When the button is clicked, the data-uid is read and used to select the div with corresponding data-uid.
Another small improvement that I made was to change the type attribute on the button to button. A value of submit means that the button should be used for submit a form which is not what you are doing here.
//Get users information
$sql = "SELECT user.uid, user.first, user.last, user.email, user.rating
FROM user
INNER JOIN team_members ON user.uid=team_members.uid
WHERE tid = '$tid'
ORDER BY user.last ASC";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
//name as button(displayed on page load)
echo "<button class='player' type='button' data-uid='".$row["uid"]."'>
".$row["first"]." ".$row["last"]."</button><br>";
//hidden information to be shown once button clicked
echo "<div class='player_info' style='display:none' data-uid='".$row["uid"]."'>
".$row["email"]." ".$row["rating"]."
</div>";
}
$(document).ready(function(){
$('button.player').click(function(){
$('div.player_info[data-uid='+$(this).attr('data-uid')+']').toggle();
});
});

Answer 2

Wrap your .player and .player_info in a <div> and do some toggling with JQuery like so:
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo "<div class='player-container'>
//name as button(displayed on page load)
echo "<button class='player' type='submit'>
".$row["first"]." ".$row["last"]."</button><br>";
//hidden information to be shown once button clicked
echo "<div class='player_info' style='display:none'>
".$row["email"]." ".$row["rating"]."
</div>";
echo "</div>
}
$(document).ready(function(){
// hide all of the player_info containers
$(".player_info").hide();
$(".player-container").click(function() {
// this selects any child element of the clicked container with the
// classname .player_info and toggles it open or closed
$(this).children(".player_info").slideToggle();
});
});

Answer 3

You aren't specifying which player_info you want to toggle, $('div.player_info') will select all of them. A quick and dirty way to solve this would be to use select the next sibling with jQuery, relative to the button, like so:
$(document).ready(function(){
$('button.player').click(function(){
$(this).next().toggle();
});
});