Как я могу передать значения соответствующей строки в модальное окно, когда происходит событие щелчка на таблице?

Когда происходит событие click на таблице, я хочу передать значения соответствующей строки в модал. Я написал подобный код, но в модале всегда передаются значения верхней строки. Я хочу, чтобы в модале отображались значения той строки, на которой я щелкнул. Как я могу это обеспечить?

коды моей таблицы здесь:

<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>

мой модал здесь

и коды моего скрипта

<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>

вывод консоли

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

Проблема в том, что значения щелкнутого элемента в таблице не появляются. На какой бы элемент я не кликнул, отображаются значения элемента в верхней части таблицы. Как я могу решить эту проблему?

<script type="text/javascript">
$(document).ready(function () {
    $(".edit-item-btn").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)

        
        });
    });