onclick() does not work in a table

Question

i created an appointments table and added two links to accept and reject appointments. the links are displayed in every row of the table but when i click it the text accept & reject are only displayed in the first row & I also need to know how to insert the text that appears after the button click into the db i would request someone to pls provide me some help thanks!

<form method="post" action="delete.php" >
   <table cellpadding="0" cellspacing="0" border="0" class="table table-condensed" id="example">
      <thead>
         <tr>
            <th>appoinment ID</th>
            <th>Date</th>
            <th>time</th>
            <th>teacher</th>
            <th>parent</th>
            <th> accept/reject </th>
            <th>label</th>
         </tr>
      </thead>
      <tbody>
         <?php 
            $query=mysqli_query($conn, "select * from `app` left join `par` on par.par_id=app.par_id
            left join `tea` on tea.tea_id=app.tea_id
            ORDER BY app_id DESC");

                if($query === false)
                {
                    throw new Exception(mysql_error($conn));
                }
                while($row=mysqli_fetch_array($query))
                {
                    $ann_id=$row['app_id'];
                    $date=$row['date'];
                    $msg=$row['time'];

                    $username = $row['username'];
                     $username = $row['p_username'];
            ?>
         <tr>
            <td><?php echo $row['app_id'] ?></td>
            <td> <?php echo date('j/m/y',strtotime($row['date'])); ?></td>
            <td><?php echo $row['time'] ?></td>
            <td><?php echo $row['p_username'] ?></td>
            <td><?php echo $row['username'] ?></td>
            <td>    <a href="#" onclick="document.getElementById('chgtext').innerHTML='reject';">reject</a> &nbsp; &nbsp;
               <a href="#" onclick="document.getElementById('chgtext').innerHTML='accept';">accept</a>&nbsp;  &nbsp;
            </td>
            <td>
               <div id="chgtext">PENDING</div>
            </td>
         </tr>
         <?php 
            }

            ?>
      </tbody>
   </table>
   </div>
</form>

Answer 1

In jQuery it would look like this:

<td>
    <a href="#" class="reject">reject</a> 
    <a href="#" class="accept">accept</a>
</td>
<td>
    <div class="chgtext">PENDING</div>
</td>

Then, before closing body tag:

<script>
    $(document).ready(function(){
        $('.reject').on('click', function(){
            var row = $(this).closest('tr'); //find the row the link is in
            var thediv = row.find('.chgtext') //find the correct div within that tr
            $(thediv).text('reject');
        });
        $('.accept').on('click', function(){
            var row = $(this).closest('tr'); //find the row the link is in
            var thediv = row.find('.chgtext') //find the correct div within that tr
            $(thediv).text('accept');
        });
    });
</script>

You can make the code shorter, but I wanted to show you how it works step by step.