How to show data in modal by clicking a button in table using Javascript?

Question

I am using Thymeleaf to get data from Java and by clicking a button to update the data of the table I want to show the data of the row button I clicked in the modal inputs. When I click the button here: https://ibb.co/WH14fBQ

I want to show the modal with the data of the row I clicked the button: https://ibb.co/VTQLTsM

$(document).ready(function(){
    
    $('.container .table .btn').click(function(event){
        
        event.preventDefault();
        
        var href = $(this).attr('href');
        
        
        $.get(href, function(courses, status){
            $('#courseidEdit').val(courses.courseid);
            $('#nameEdit').val(courses.name);
            $('#yearEdit').val(courses.year);
            $('#syllabusEdit').val(courses.syllabus);
            $('#semesterEdit').val(courses.semester);
            $('#attendanceEdit').val(courses.attendance);
        }); 

        $('#editModal').modal('show');  
        
    });
    
});

<div class="container mt-5 mb-2">
        <div>
        <h1 class="display-4 text-uppercase" style="font-family: 'Verdana'; text-align: center">Courses</h1>
        <hr class="style1 mb-5">
        <!-- Button to Open the Modal -->
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#myModal"><img src="https://i.ibb.co/j43pLX3/black-plus-icon-24.png" width="15" /> New Course</button>
        
            <table style="background-color:#484444" class="table table-hover mt-5">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Year</th>
                  <th scope="col">Syllabus</th>
                  <th scope="col">Semester</th>
                  <th scope="col">Attendance</th>
                  <th scope="col">Actions</th>
                </tr>
              </thead>
                <tr th:each="course : ${courses}">
                    <td th:text="${course.courseid}"></td>
                    <td th:text="${course.name}"></td>
                    <td th:text="${course.year}"></td>
                    <td th:text="${course.syllabus}"></td>
                    <td th:text="${course.semester}"></td>
                    <td th:text="${course.attendance}"></td>
                    <td>
                        <a class="btn btn-sm btn-success" th:href="@{/courses/getOne/(courseid=${course.courseid})}"><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
                    </td>
                </tr>
        </table>
        </div>
    </div>
  
  
<div class="modal" id="editModal">
    <form th:action="@{/courses/updateCourse}" method="PUT">
        <div class="modal-dialog">
            <div class="modal-content" style="background-color:#383434">
    
          <!-- Modal Header -->
                  <div class="modal-header">
                    <h4 class="modal-title" id="editModal">Update Course</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>
            
                  <!-- Modal body -->
                  <div class="modal-body" style="background-color:#383434">
                    
                        <label for="recipient-name" class="col-form-label">ID</label>
                        <input style="background-color:#CDCDCD" type="text" class="form-control"     id="courseidEdit" name="courseidEdit">
                    
                        <label for="recipient-name" class="col-form-label">Name</label>
                        <input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit">     
                    
                        <label for="recipient-name" class="col-form-label">Year</label>
                        <input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit">
                  
                        <label for="recipient-name" class="col-form-label">Syllabus</label>
                        <input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit">

                        <label for="recipient-name" class="col-form-label">Semester</label>
                        <input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit">
                
                        <label for="recipient-name" class="col-form-label">Attendance</label>
                        <input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit">
                  </div>
                    
            
                  <!-- Modal footer -->
                  <div class="modal-footer">
                     <button type="submit" class="btn btn-success">Update</button>
                     <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                  </div>
        
            </div>
            </div>
    </form>
</div>