How can I make an accept button for each row in the table?-CodePudding

I want to make an accept button where when I press the accept button another column is shown, it worked fine in the first row of the table, but the other rows did not work.
Here is My HTML and PHP code:

<tbody>
            <?php
            $sql = "SELECT * FROM appointments INNER JOIN patients ON appointments.patientID =patients.patientID WHERE docID='$doctorId'";
            $stmt = $conn->prepare($sql);
            $stmt->execute();
            $i=0;
            while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                $i  ;
             extract($row);
            echo"<tr>
                <td >$i</td>
                <td>{$patientFName} {$patientLName}</td>
                <td>{$AppStart}</td>
                <td>{$AppEnd}</td>
                <td id='refuseAccept' style='display:block;'>
                <button type='button' class='btn btn-outline-danger'>refuse</button>
                <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'  >accept</button>
                </td>
                <td id='showOptions' style='display:none; class='m-2' >
                <a href='#' title='view Details' class='text-success p-2 addappoment' > <i class='fas fa-calendar-check'></i></a>
                <a href='#' title='Edit' class='text-primary p-2 editBtn' ><i class='fas fa-user-edit'></i> </a>
                <a href='#' title='Delete' class='text-danger p2 deleteBtn' ><i class='fas fa-user-times'></i> </a>
                </td>
                
            </tr>
            ";
            
            }
            ?>
            
        </tbody>

and here is Javascript:

$(document).on('click','.acceptPpomentDoc', function (){
 document.getElementById('showOptions').style.display = "block";
document.getElementById('refuseAccept').style.display = "none";
});

CodePudding user response：

Don't use the same id multiple times. Instead use a class name or other attribute. You can reference the target div tags using relative paths, like:

$(document).on('click', '.acceptPpomentDoc', function() {
  // $(this) references the item clicked, in this case the accept button
  $(this).closest('tr').find('.showOptions').show();
  // find the containing <tr>, then from there find the div with class name showOptions and set display:block
  $(this).closest('tr').find('.refuseAccept').hide();
  // find the containing <tr>, then from there find the div with class name refuseAccept and set display:none
});

$(document).on('click', '.acceptPpomentDoc', function() {
  $(this).closest('tr').find('.showOptions').show();
  $(this).closest('tr').find('.refuseAccept').hide();
});

.showOptions {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>$i</td>
    <td>{$patientFName} {$patientLName}</td>
    <td>{$AppStart}</td>
    <td>{$AppEnd}</td>
    <td class='refuseAccept'>
      <button type='button' class='btn btn-outline-danger'>refuse</button>
      <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'>accept</button>
    </td>
    <td class='showOptions m-2'><strong>ACCEPTED
      <a href='#' title='view Details' class='text-success p-2 addappoment'> <i class='fas fa-calendar-check'></i></a>
      <a href='#' title='Edit' class='text-primary p-2 editBtn'><i class='fas fa-user-edit'></i> </a>
      <a href='#' title='Delete' class='text-danger p2 deleteBtn'><i class='fas fa-user-times'></i> </a>
    </td>

  </tr>
</table>