Edit each table row inside a foreach loop - php

Question

I have a foreach loop on a tale row. Each row has an "edit" button to edit that row only. Using JS, I want to get a hidden open and edit the row.
Bellow is my code that I have tried but it works on one element only.
<?php
foreach($sofas as $sofa)
{
?>
<tr>
<td><?php echo $sofa["name"];?></td>
<td><?php echo $sofa["zirkar"];?></td>
<td><?php echo $sofa["parche"];?></td>
<td><?php echo $sofa["fiparche"];?></td>
<td><?php echo $sofa["mizvasat"];?></td>
<td><?php echo $sofa["asaly"];?></td>
<td>
<input onclick="myFunction()" type="button" value="ویرایش">
</td>
</tr>
<tr style="display:none;" id="<?php echo $sofa["id"];?>">
<td>
This is my DIV element.
</td>
</tr>
<?php
}
?>
<script>
function myFunction() {
<?php
foreach($sofas as $sofa)
{
?>
var x = document.getElementById("<?php echo $sofa["id"];?>");
<?php
}
?>
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I'm still learning, so please help me resolve my issue. I'm expecting the code to work on each individual table row.

Answer 1

Why don't you use something like this:
<?php
foreach($sofas as $sofa)
{
?>
<tr>
<td><?php echo $sofa["name"];?></td>
<td><?php echo $sofa["zirkar"];?></td>
<td><?php echo $sofa["parche"];?></td>
<td><?php echo $sofa["fiparche"];?></td>
<td><?php echo $sofa["mizvasat"];?></td>
<td><?php echo $sofa["asaly"];?></td>
<td>
<input onclick="myFunction('<?php echo $sofa["id"];?>')" type="button" value="ویرایش">
</td>
</tr>
<tr style="display:none;" id="<?php echo $sofa["id"];?>">
<td>
This is my DIV element.
</td>
</tr>
<?php
}
?>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Code is very simple, you only need to send the element id to the js function.