How can I pass the values of the relevant row into the modal when a click event occurs on a table?

When a click event occurs on a table, I want to pass the values of the relevant row into the modal. I wrote a code like this, but the values of the top row are always passed into the modal. What I want to do is to show the values in the row I clicked in the modal. How can I provide this?

my table codes here:

<table class="table align-middle" id="customerTable">
    <thead class="table-light">
        <tr>
           
            <th class="sort" data-sort="name">Name Surname</th>
            <th class="sort" data-sort="company_name">Phone Number</th>
            <th class="sort" data-sort="leads_score">Note</th>
            <th class="sort" data-sort="phone">Status</th>
            <th class="sort" data-sort="location">Personal Name</th>
            <th class="sort" data-sort="tags">Data Name</th>
            <th class="sort" data-sort="action">Edit</th>
        </tr>
    </thead>
    <tbody class="list form-check-all">
      
            {% for x in model %}
            <tr>
                <td class="table-namesurname">{{x.name}}</td>
                <td class="table-phonenumber">{{x.phonenumber}}</td>
                <td class="table-note">{{x.note}}</td>
                <td class="table-status">{{x.status}}</td>
                <td class="table-callname">{{x.callname}}</td>
                <td class="table-dataname">{{x.dataname}}</td>
                <td>
                    <ul class="list-inline hstack gap-2 mb-0">
                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                            <a class="edit-item-btn" id="call-button" href="#showModal" data-bs-toggle="modal" data-id="{{x.id}}"><i class="ri-phone-line fs-16"></i></a> <!-- Here is the edit button -->
                        </li>
                    </ul>
                </td>
            </tr>
            {% endfor %}
    </tbody>
</table>

my modal here

<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
            </div>
            <form action="">
                <div class="modal-body">
                    <input type="hidden" id="id-field" />
                    <div class="row g-3">
                        <div class="col-lg-12">
                            <div>
                                <label for="company_name-field" class="form-label">Name Surname</label>
                                <input type="text" id="call-name-surname" class="form-control" placeholder="Enter company name" value="" required />
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div>
                                <label for="company_name-field" class="form-label">Phone Number</label>
                                <input type="email" id="call-phone-number" class="form-control" placeholder="Enter company name" value="" required />
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-lg-12">
                            <div>
                                <label for="leads_score-field" class="form-label">Note</label>
                                <input type="text" id="call-note-field" class="form-control" placeholder="Enter lead score" value="" required />
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-lg-12">
                            <div>
                                <label for="phone-field" class="form-label">Status</label>
                                <input type="text" id="call-status-field" class="form-control" placeholder="Enter phone no" value="" required />
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div>
                                <label for="phone-field" class="form-label">Personal Name</label>
                                <input type="text" id="call-persnoel-name" class="form-control" placeholder="Enter phone no" value="" required />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
                        <button type="submit" class="btn btn-success" id="add-btn">Kaydet</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

and the my script codes

<script type="text/javascript">
    $(document).ready(function () {
        $("#call-button").click(function() {
            
            var nameSurname = $(this).closest('tr').find('.table-namesurname').text();
            var phoneNumber = $(this).closest('tr').find('.table-phonenumber').text();
            var note = $(this).closest('tr').find('.table-note').text();
            var status = $(this).closest('tr').find('.table-status').text();
            var callName = $(this).closest('tr').find('.table-callname').text();
            var dataName = $(this).closest('tr').find('.table-dataname').text();
            
            $("#call-name-surname").val(nameSurname)
            $("#call-phone-number").val(phoneNumber)
            $("#call-note-field").val(note)
            $("#call-status-field").val(status)
            $("call-persnoel-name").val(callName)

            
            });
        });

</script>

console output

Gökan 905387532589 <empty string> Aranmadı ece datatest

The problem here is that the values of the clicked element in the table are not coming. Whichever I click, the values of the element at the top of the table are displayed. How can I solve this problem?