How can I change this image with JQuery?

Working on an online campus that includes an expandable transcript that looks like this:

When you click on the arrow(s), you're able to expand the rows beneath the Course Name, so it looks like this:

I'm using this code to toggle the rows:

<script>
$(document).ready(function(){
  $('.trigger').click(function() {
   $(this).parents("tr").next().slideToggle();
    return false;
  });
});
</script>

Select allOpen in new window

What I would like to do is add some functionality that changes the image of the corresponding arrow. 

The code that's triggering the above function is this:

<b><?php echo stripslashes($row['page_name']); ?></b><div style="float:right;"><a href="#" class="trigger"><img src="ktl_images/arrow_button.png" id="arrow_<?php echo $row['course_id'];?>"></a></div>

Select allOpen in new window

Each arrow has a unique id, but I'm a little lost as to how I might pass that id into the function and still slide the "next" row...

How can I can this done?

Here's the code in it's entirety:

<?php require_once('header.php');?>

<?php 
echo "<script>$(document).ready(function() {";
   $boom="SELECT DISTINCT t.course_id, c.page_name, c.subject from transcript t JOIN courses c on t.course_id=c.id order by c.subject";
   $boom_result = mysqli_query($cxn, $boom)
   or die ("Couldn't execute query.");
   while ($boom_row=mysqli_fetch_assoc($boom_result))
   {
      echo "$('#table_";
      echo $boom_row['course_id'];
      echo "').DataTable();";
   }
echo "});</script>";

?>

        <!-- Page Content-->
        <section class="py-5">
            <div class="container" style="margin-top:-25px;">
            <div class="row">
               <div class="col-md-6 col-xs-12 code_title">
                  <p><h3>KTL Campus</h3></p>
               </div>
               <?php require_once('search_box.php');?>
            </div>
            </div>
        </section>
      <section>
         <div class="container">
            <div class="row">
               <div class="col-xs-12" style="margin-left:10px; margin-top:-35px; width:100%;">
                  Welcome to the KTL Campus Transcript!
                  <br><br>
                  Below you'll see a list of all the courses as well as a record of who has successfully "aced" the quiz!<br>
                  <ul style="margin-top:10px;">
                     <li>click on the arrow to the right of each course name to see the list of those who have completed the class</li>
                     <li>to see a list of your completed courses only, fill in your email and employee id and click on, "submit"</li>
                  </ul>
                  Welcome!
                  <br><br>
               </div>
            </div>
            <form action="transcript_student.php" method="Post">
               <div class="row">
                  <div class="col-md-4 col-12">
                     <label for "email">email</label>
                     <input type="text" class="form-control" name="email" id="email">
                  </div>
                  <div class="col-md-4 col-12">
                     <label for "employee_id">Employee ID</label>
                     <input type="text" class="form-control" name="employee_id" id="employee_id">
                  </div>
                  <div class="col-md-4 col-12" style="margin-top:6px; text-align:center;"><br>
                     <button type="submit" class="btn btn-dark" style="width:98%;">Submit</button>
                  </div>
               </div>
            </form>
            <div class="row">
               <div class="col-12">
                  &nbsp;<br>
               </div>
            </div>
            <div class="row">
               <div class="col-xs-12" style="border:1px solid #ccc; box-shadow:5px 5px 3px #ccc; border-radius:10pt; padding:10px; width:85%; margin:auto;">
                  <table class="table">
                     <?php
                     $course_subject="";
                     $course_name="";
                     $count=1;
                     $query="SELECT DISTINCT t.course_id, c.page_name, c.subject from transcript t JOIN courses c on t.course_id=c.id order by c.subject";
                     $result = mysqli_query($cxn, $query)
                     or die ("Couldn't execute query.");
                     while ($row=mysqli_fetch_assoc($result))
                     {
                        if ($row['subject']<>$course_subject) // this is your first main category. If the subject is different, it will display the "Course Subject" header
                        { 
                        ?>
                           <tr>
                              <?php
                              if($count==1) 
                              {
                              ?>
                                 <td style="background-color:#000; color:#fff; border-top-left-radius:10pt; border-top-right-radius:10pt;" colspan="2">
                              <?php } else { ?>
                                 <td style="background-color:#000; color:#fff; font-weight:bold;" colspan="2">
                              <?php } ?>
                                 <?php echo stripslashes($row['subject']); ?>
                              </td>
                           </tr>
                        <?php
                        }
                        if ($row['page_name']<>$course_name) // this is your second main category. If the course name is different, it will display the "Course name" header
                        { 
                        $name_header_count=0; // this will constitute a new list so you'll want that header to be in place
                        ?>
                           <tr style="height:42px;">
                              <td style="background-image:url('ktl_images/grey_cell.jpg'); color:#fff; border-bottom:1px solid #cccaca;" colspan="2">
                                 Course Name
                              </td>
                           </tr>
                           <tr>
                              <td colspan="2">
                                 <b><?php echo stripslashes($row['page_name']); ?></b><div style="float:right;"><a href="#" class="trigger"><img src="ktl_images/arrow_button.png" id="arrow_<?php echo $row['course_id'];?>"></a></div>
                              </td>
                           </tr>
                        <?php
                        }
                        ?>
                        <!-- nested table that shows all of the names of those who've completed this quiz -->
                        <tr class="transcript" style="display:none;">
                           <td colspan="2">
                              <table class="table-borderless" style="width:100%;" id="table_<?php echo $row['course_id'];?>">
                                 <thead>
                                    <tr>
                                       <th style="background-color:#a1c4fd; text-align:center;">
                                          <div class="blue_interior">
                                             <div class="table_white_name">
                                                <div class="table_title_name">
                                                   <span style="font-weight:normal;">name</span>
                                                </div>
                                             </div>
                                          </div>
                                       </th>
                                       <th style="background-color:#a1c4fd; text-align:center;">
                                          <div class="blue_interior">
                                             <div class="table_white_date">
                                                <div class="table_title_date">
                                                   <span style="font-weight:normal;">date / time</span>
                                                   </div>
                                             </div>
                                          </div>
                                       </th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    <?php
                                    $class_id=$row['course_id'];
                                    $students="SELECT first_name, last_name, timestamp from transcript where course_id='$class_id' order by last_name";
                                    $students_query=mysqli_query($cxn, $students)
                                    or die("Couldn't execute the students query.");
                                    while($students_row=mysqli_fetch_assoc($students_query)) 
                                    {
                                    ?>
                                    <tr>
                                       <td class="cell_first_name">
                                          <?php echo stripslashes($students_row['first_name']).' '.stripslashes($students_row['last_name']);?> 
                                       </td>
                                       <td class="cell_date">
                                          <?php 
                                          $the_date=$students_row['timestamp'];
                                          echo date("m/d/Y g:i:s A", strtotime($students_row['timestamp'])); 
                                          ?>
                                       </td>
                                    </tr>
                                    <?php
                                    }
                                    ?>
                                 </tbody>
                              </table>
                           </td>
                        </tr>
                        <?php
                        $course_subject=$row['subject'];
                        $course_name=$row['page_name'];
                        $count=$count+1;
                        }
                        ?>
                     </tbody>
                  </table>
               </div>
            </div><br><br>
         </div>
      </section>

<script>
$(document).ready(function(){
  $('.trigger').click(function() {
   $(this).parents("tr").next().slideToggle();
    return false;
  });
});
</script>
      
<?php require_once('footer.php');?>

Select allOpen in new window

...and here's the source code in case the specific version of Bootstrap, JQuery etc is needed to submit an answer that you're confident is going to get the job done:

As always, thank you so much for your time!