Collapsing bootstrap table with select - php

Question

I have a bootstrap table where I get the values from my database using select:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Studentnamn</th>
<th>Student ID</th>
<th>Registrerade kurser</th>
<th>Betyg</th>
</tr>
</thead>
<tbody>
<?php include 'studentDB.php'; ?>
</tbody>
</table>
I want to make my table collapse and then display an inputform where the values on onclicked row can be updated. I have used following code:
$sql = "SELECT student.studName, grades.studId, grades.courseId, grades.grade FROM student
INNER JOIN grades ON student.studId=grades.studId";
try {
foreach ($pdo->query($sql) as $row) {
echo '<tr data-toggle="collapse" data-target="#collapseUpdate">';
echo '<td>' . $row['studName'] . '</td>';
echo '<td>' . $row['studId'] . '</td>';
echo '<td>' . $row['courseId'] . '</td>';
echo '<td>' . $row['grade'] . '</td>';
echo '</tr>';
echo '<tr>';
echo '<td colspan="6" class="hiddenRow" id="collapseRow"><div class="accordian-body collapse" id="collapseUpdate">
<div class="card card-block">
<form class="form-horizontal" action="update.php" method="post" id="newGrade">
<div class="control-group">
<label class="control-label">Nytt betyg:</label>
<div class="controls">
<p><input id="cbetyg" name="grade" type="text"></p>
<input type="hidden" name="studId" value="'. $row['studId'] .'">
<input type="hidden" name="courseId" value="'. $row['courseId'] .'">
</div>
</div>
<div class="form-actions">
<input type="submit" name="submit" value="Ändra">
</div>
</form>
My problem here is now that, only the first row collapses and can use update. When I click on the other rows, the first row collapses... Can somebody tell me what I can do? And also, will my update still work for each individual row if I make the collapse work for all the rows?
My table looks like this (click here)
Thanks!

Answer 1

You are using the same collapseUpdate target in any field. Try modify these lines:
instead
echo '<tr data-toggle="collapse" data-target="#collapseUpdate">';
use
echo '<tr data-toggle="collapse" data-target="#collapseUpdate'.$row['studId'].'">';
and instead
echo '<td colspan="6" class="hiddenRow" id="collapseRow"><div class="accordian-body collapse" id="collapseUpdate">
use
echo '<td colspan="6" class="hiddenRow" id="collapseRow"><div class="accordian-body collapse" id="collapseUpdate'.$row['studId'].'">
I suspect that studId is unique in this table.