Fetching data in PHP - php

Question

I have <table> that display data. I have a button if I click, the data will be displayed in #datacontainer. But the problem is only first row in my table is shown.
Here's my code
HTML - here's the table, imagine that I have 4 data in my table (DATABASE) but the first row only shows the data when you click the button.
<table>
<tr>
<th width="15%;">Image</th>
<th width="0">ID</th>
<th width="50%;">Name</th>
<th>Action</th>
</tr>
<?php while ($row = mysqli_fetch_array($accounts)) { ?>
<tr>
<td><img src="images/<?php echo $row['image']; ?>"></td>
<td><?php echo $row['id']; ?><input type="text" id="text_id" value="<?php echo $row['id']; ?>"></td>
<td><?php echo $row['lastname']; ?>, <?php echo $row['firstname']; ?></td>
<td>
<i class="fab fa-reddit-alien" id="showdatacontainer" onclick="return chk()"></i>
<i class="far fa-edit" style="margin: 0 7% 0 7%;"></i>
<i class="fas fa-trash"></i>
</td>
<td>
</td>
<td>
</td>
</tr>
<?php } ?>
</table>
<div id="datacontainer"></div>
Javascript - and here's my jquery code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function chk()
{
$("#datacontainer").slideToggle(300);
var id = document.getElementById('text_id').value;
var dataString = 'id='+ id;
$.ajax({
type: "post",
url: "showdata.php",
data:dataString,
cache:false,
success: function(data){
$("#datacontainer").html(data);
}
});
return false;
}
</script>
PHP - and here's my PHP code "showdata.php"
<?php
$db = mysqli_connect('localhost', 'root', '', 'psbr');
if (isset($_POST['id'])) {
$id = $_POST['id'];
$accounts = mysqli_query($db, "SELECT * from accounts where id = '$id'");
}
?>
<table>
<?php while ($row = mysqli_fetch_array($accounts)) { ?>
<tr>
<td class="w"><h1>Name</h1></td>
</tr>
<tr>
<td><?php echo $row['lastname']; ?></td>
</tr>
<?php } ?>
</table>
<style type="text/css">
.w
{
font-size: 12vh;
}
</style>
please help me out of this problem thankyou! :D

Answer 1

You are grabbing the value by ID, yet there are several elements with the same ID, because you are in a loop, therefore, you will always get the first answer.
<td><?php echo $row['id']; ?><input type="text" id="text_id" value="<?php echo $row['id']; ?>"></td>