Only first row button is working in a table

Problem: In the complete column, there is yes button after clicking on it, it show consulted but problem is only one row is working. I don’t understand how i defined each row uniquely. Please have a look at this code and let me know what mistake I’m doing here.

<div class="card-body">
    <div class="table-responsive ">
<?php
    $query = "SELECT * FROM book_now";
    $query_run = mysqli_query($conn, $query);
?>
        <table class="table table-bordered table table-striped" id="dataTable" cellspacing="0">
            <thead class="table table-success text-center" style="width: 80%">
                <tr>
                    <th style="width: 1%"> S.No </th>
                    <th> Patient Name </th>
                    <th> UHID </th>
                    <th style="width: 12%"> Time Slot </th>
                    <th> Contact No </th>
                    <th> Complete </th>
                    <th> Write Prescription </th>
                </tr>
            </thead>
            <tbody>
<?php
if(mysqli_num_rows($query_run) > 0)        
{
    foreach($query_run as $row)
    {
?>
                <tr class="text-center">
                    <td><?php  echo $row['booking_id']; ?></td>
                    <td><?php  echo $row['name']; ?></td>
                    <td><?php  echo $row['booked_by']; ?></td>
                    <td><?php  echo $row['appointment_time_slot']; ?></td>
                    <td><?php  echo $row['phone']; ?></td>
                    <td>
                        <form action="" method="post">
                            <input onclick="func()" id="accountDetails" type="button" value="Yes"></input>
<script>
function func() {
    document.getElementById('accountDetails').value  = 'Consulted';
}
</script>
                        </form>

Answer

The issue is because you’re using id attributes in the repeated content which creates duplicates. id have to be unique.

To fix the issue change that id to a class, then you can create an event handler to listen for any click on any of the button elements. From there you can use the Event object passed to the event handler to update only the button which was clicked.

Note in the example below the use of an unobtrusive event handler instead of an inline onclick attribute. The latter is not good practice and should be avoided. Also note that the event is delegated to the parent table. This allows us to use a single event handler no matter how many rows/buttons the table contains, or if they are dynamically created after the DOM loads.

document.querySelector('#dataTable').addEventListener('click', e => {
  if (e.target.matches('.accountDetails'))  
    e.target.value = 'Consulted';
});

<div class="card-body">
  <div class="table-responsive ">
    <table class="table table-bordered table table-striped" id="dataTable" cellspacing="0">
      <thead class="table table-success text-center" style="width: 80%">
        <tr
          <th> Complete </th>
          <th> Write Prescription </th>
        </tr>
      </thead>
      <tbody>
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>        
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>