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  id="customerTable">
    <thead >
        <tr>
           
            <th  data-sort="name">Name Surname</th>
            <th  data-sort="company_name">Phone Number</th>
            <th  data-sort="leads_score">Note</th>
            <th  data-sort="phone">Status</th>
            <th  data-sort="location">Personal Name</th>
            <th  data-sort="tags">Data Name</th>
            <th  data-sort="action">Edit</th>
        </tr>
    </thead>
    <tbody >
      
            {% for x in model %}
            <tr>
                <td >{{x.name}}</td>
                <td >{{x.phonenumber}}</td>
                <td >{{x.note}}</td>
                <td >{{x.status}}</td>
                <td >{{x.callname}}</td>
                <td >{{x.dataname}}</td>
                <td>
                    <ul >
                        <li  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                            <a  id="call-button" href="#showModal" data-bs-toggle="modal" data-id="{{x.id}}"><i ></i></a> <!-- Here is the edit button -->
                        </li>
                    </ul>
                </td>
            </tr>
            {% endfor %}
    </tbody>
</table>

my modal here

<div  id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div >
        <div >
            <div >
                <h5  id="exampleModalLabel"></h5>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
            </div>
            <form action="">
                <div >
                    <input type="hidden" id="id-field" />
                    <div >
                        <div >
                            <div>
                                <label for="company_name-field" >Name Surname</label>
                                <input type="text" id="call-name-surname"  placeholder="Enter company name" value="" required />
                            </div>
                        </div>
                        <div >
                            <div>
                                <label for="company_name-field" >Phone Number</label>
                                <input type="email" id="call-phone-number"  placeholder="Enter company name" value="" required />
                            </div>
                        </div>
                        <!--end col-->
                        <div >
                            <div>
                                <label for="leads_score-field" >Note</label>
                                <input type="text" id="call-note-field"  placeholder="Enter lead score" value="" required />
                            </div>
                        </div>
                        <!--end col-->
                        <div >
                            <div>
                                <label for="phone-field" >Status</label>
                                <input type="text" id="call-status-field"  placeholder="Enter phone no" value="" required />
                            </div>
                        </div>
                        <div >
                            <div>
                                <label for="phone-field" >Personal Name</label>
                                <input type="text" id="call-persnoel-name"  placeholder="Enter phone no" value="" required />
                            </div>
                        </div>
                    </div>
                </div>
                <div >
                    <div >
                        <button type="button"  data-bs-dismiss="modal">Kapat</button>
                        <button type="submit"  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?

CodePudding user response：

HTML id attribute should be unique, adding multiple elements with the same id, when you select, you will only get the first element that has this id, you need to select the rows by class, you have edit-item-btn class for the button.

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

        
        });
    });