I have a data displaying table that have a link(Reserver's Profile) which pops up a modal dialog that is expected to display data from the database basing on each rows. In my case the modal dialog displays the data on the first row in my database even when i click on the link on the second row and on any other row.
<tbody>
<?php
$result = mysqli_query($con,"SELECT * FROM general_reservation ");
$count = mysqli_num_rows($result);
echo "<b><center><h3>Cars Reserved By Districts</h3></center></b><br><br>";
while($row=mysqli_fetch_array($result)){
?>
<tr>
<td><center><input type="checkbox" name="check[<?php echo $row['reservation_id'];?>]" value="1" ></center> </td>
<td><input type="" name="car_type[]" value="<?php echo $row['car_type'];?>" readonly></label></td>
<td><input style="width: 100px" type="" name="trim[]" value="<?php echo $row['trim'];?>" readonly></label></td>
<td><input style="width: 80px" type="" name="year_made[]" value="<?php echo $row['year_made'];?>" readonly></label></td>
<td><input style="width: 80px" type="" name="km[]" value="<?php echo $row['km'];?>" readonly></label></td>
<td><input style=" background-color:<?php echo $row['exterior_colour'];?>; width: 55px;" type="" name=" exterior_colour[]" value="" readonly></label></td>
<td><input type="" name="options[]" value="<?php echo $row['options'];?>" readonly></label></td>
<td><input style="width: 65px" type="" name="quantity[]" value="<?php echo $row['quantity'];?>" readonly></label></td>
<td><input type="" name="time[]" value="<?php echo $row['time'];?>" readonly></label></td>
<td><textarea type="" name="comment[]" value="<?php echo $row['comment'];?>" readonly><?php echo $row['comment'];?></textarea></td>
<td><a type="submit" class="btn btn-link" data-toggle="modal" data-target="#myModal" >Reserver's Profile</a></td>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><center>Reserver</center></h4>
</div>
<div class="modal-body">
<p >First Name: <?php echo $row['fname'];?> </p><br>
<p >Last Name: <?php echo $row['lname'];?></p><br>
<p >Mobile Number: <?php echo $row['mobile_number'];?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
<?php } //end of while loop ?>
</tbody>
You need unique id's for the modals, then update:
data-target="#myModal"
For example create a variable above the row loop:
$i = 0;
while ( ... )
# increment the pointer in the loop:
$modal_id = 'myModal' . $i;
$i ++;
Then append this unique id to each of the modal
data-target="#<?php echo $modal_id; ?>"
and
<div class="modal fade" id="<?php echo $modal_id; ?>" role="dialog">
note: using Ajax would be better, though it's a more advanced technique.