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

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";
}); 

source https://stackoverflow.com/questions/70131205/how-can-i-make-an-accept-button-for-each-row-in-the-table