Bootstrap模式仅从动态表中删除第一行

Question

I have a problem with passing the dynamic variable to the modal section. Every time I take the first row from the table and as a result bootstrap's modal isn't working properly. I use Laravel freamework.

How can I pass a dynamic variable to a section? Can somebody help me?

Here's my code:

showCustomer.blade.php

<div class="row">
<div class="col-12">
    <table id="myTable" class="table table-hover display" cellspacing="0" width="100%">
        <thead class="thead-light">
            <tr>
                <th class="th-sm">ID</th>
                <th class="th-sm">Name</th>
                <th class="th-sm">Surname</th>
                @if($perm === true)
                <th class="no-sort"></th>
                @endif
            </tr>
        </thead>
        <tbody>
            @foreach($customers as $customer)
            <tr>
                <td>{{$customer->id}}</td>
                <td class="font-weight-bold">{{$customer->name}}</td>
                <td>{{$customer->surname}}</td>
                @if($perm === true)
                <td class="text-right">
                    <div class="btn-group" role="group">
                        <!-- Button trigger delete modal -->
                        <button type="button" class="btn btn-danger" data-toggle="modal"
                            data-target="#deleteModal{{$customer->id}}"><i class="far fa-trash-alt"></i></button>

                        <!-- Delete button -->
                        @section('deleteModalAction')
                        <a href="{{ route('backstage.removeCustomer',$customer->id) }}" class="btn btn-primary"
                            role="button">Yes</a>
                        @endsection('deleteModalAction')

                        @include('components.deleteModal')

                        <!-- Edit button -->
                        <a href="{{ route('backstage.showCustomerForm',$customer->id) }}">
                            <button type="button" class="btn btn-default">
                                <i class="far fa-edit"></i></button> </a>
                    </div>
                </td>
                @endif
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

removeModal.blade.php

<div class="modal fade" id="deleteModal{{$customer->id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="deleteModal">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p class="text-center">Are you sure?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
            @yield('deleteModalAction')
        </div>
    </div>
</div>

Every single time, the section 'deleteModalSection'has the same variable (first id for the dynamic table)...

I had tried a lot of ways, but to no avail.

Generally, bootstrap modal is to be universal for the rest of views.

Thank you.