hide and show table row in loop

Question

Table edit button in loop is hiding and showing the first row of table with each edit button click. I need to hide and show each row in loop with its own edit button.

  <?php 
        $counter = 0;
        foreach($db->getRecordSet($sqlRecord) as $row){ $counter += 1;
            ?>
            <tr id="rowDetails">
                <td> <?php echo($counter); ?> </td>

                <td > <?php echo($row['item_code']); ?> </td>
                <td > <?php echo($row['item_name']); ?> </td>
                <td > <?php echo($row['description']); ?> </td>
                <td > <?php echo($row['quantity']); ?> </td>
                <td > <?php echo($row['p_cost']); ?> </td>

                 <td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>
            </td>
        </tr>
                <tr  id="editContent" style="display:none;">
                <td class="w10" id="row1"><input type="text" class="form-control" name="item_code" id="item_code" value="<?php echo($row['item_code']); ?>" required="required" /></td>
        </tr>

                <?php
            }
        ?>   
            </tr>
    <?php } ?>
        </table>


 -------------------------
function hideRow(){
    if(
        document.getElementById('editContent').style.display=='none') {                                                       
        document.getElementById('editContent').style.display='';
        document.getElementById('rowDetails').style.display='none';
    } else {
        document.getElementById('editContent').style.display='none';
        document.getElementById('rowDetails').style.display='';
    }

Answer 1

try to use jquery bro.

change this line of code:

<td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>

to :

<td ><input type="button" name="edit" class="hide_button" /></td>

then change :

function hideRow(){
 if(
    document.getElementById('editContent').style.display=='none') {                                                       
    document.getElementById('editContent').style.display='';
    document.getElementById('rowDetails').style.display='none';
 } else {
    document.getElementById('editContent').style.display='none';
    document.getElementById('rowDetails').style.display='';
 }

To:

 $( document ).ready(function() {
    $(".hide_button").click(function(){
         $(this).parents('tr').hide();
    });
 });