javascript - 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>
Copy code