How to get id from php loop in jquery - php

Question

Hi I'm trying to get the id for each row shown in while loop in my jquery function
Here are the request and view (PHP code)
<div class="container">
<table class="table table-striped">
<div class="table responsive">
<thead class="black white-text">
<tr>
<th>#</th>
<th>Nom et Prénoms</th>
<th>Fonction</th>
<th>Université</th>
<th>Email</th>
<th>Contact</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$result = $connection->query($stmt) ;
if($result->rowCount() > 0)
{
while($row = $result->fetch(PDO::FETCH_BOTH))
{
echo '<tr>
<td scope="row">'.$row["id"].'</td>
<td>'.$row["nom"].'</td>
<td> '.$row["fonction"].'</td>
<td> '.$row["nomU"].'</td>
<td> '.$row["email"].'</td>
<td> '.$row["Contact"].'</td>
<td>' ?>
<button type="button" class="btn btn-success valider">Valider</button> /<button type="button" class="btn btn-danger rejeter">Rejeter</button>
<?php
echo '</td>
<td>'
?>
<input type="hidden" class="the_id" value='<?php echo $row[' id ']; ?>'>
<?php echo '</td>
</tr>';
}
}
else
{
echo "0 results";
}
?>
</tbody>
</div>
</table>
</div>
And I want to show the id of each row when I click on the button "valider" for the line with jquery but it's showing the first id for all the row.
Here is th jquery code
$(document).ready(function(){
$('.valider').click(function(e){
alert($('.the_id').val());
});
});

Answer 1

Almost right. Remember that when accessing by a class name rather than an ID, you will get all of those objects.
So, we need to be more specific. Give this a try:
$('.valider').click(function(e){
var id = $(this).parent().parent().find('td').find('.the_id').val();
alert(id);
});
This takes you from $(this), your button, to its parent <td>, then the parent <tr>, then looks for any classes of .the_id inside the tr, in other words, the specific one you want.

Answer 2

I usually add a custom attribute to the elements, like data-custom-id.
'<button type="button" class="btn btn-success valider" data-custom-id="'.$row["id"].'">Valider</button>'
And then in the calling function I can access the object with this
$('.valider').click(function(e){
alert($(this).attr('data-custom-id'));
});

Answer 3

You need to go up to the parent tr to get the related input so you could use closest() with the $(this) :
$('.valider').click(function(e){
alert( $(this).closest('tr').find('.the_id').val() );
});