Нажатие на одну кнопку на столе в цикле foreach не работает

Question

Я работаю над приложением Laravel, в котором у меня есть некоторые данные, сгенерированные из бэкэнда, и я отображаю их в виде таблицы.В таблице я выполняю цикл foreach внутри tbody, посредством чего я отображаю каждую строку вместе с кнопкой, которую пользователь может щелкнуть, чтобы представить данные этой конкретной строки.Проблема состоит в том, что , когда пользователь нажимает на каждую кнопку в строке, ничего не происходит , но когда я изменяю html-структуру таблицы, данные передаются, но заголовки таблиц неправильно выравниваются, что разрушаетПользовательский интерфейс

1-й макет, который ничего не передает после нажатия кнопки

<table class="table table-hover mg-b-0 tx-11" id="policyTable">
<thead>
    <tr>
    <th>NAME</th>
    <th>INVOICE DATE</th>
    <th>VOUCHER NO.</th>
    <th>INVOICE AMOUNT</th>
    <th>KRA PIN</th>
    <th>STATUS</th>
    <th>PAYOUT</th>
    </tr>
</thead>
   <tbody>
    @foreach($medical as $lifeC)
    <form method="POST" action="{{ route('b2b.medPayout') }}" id="payoutRequest">
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  
        <tr>
            <!-- Hidden input fields that am submitting of a form that am submitting-->
             <input type="hidden" name="agentName" id="agentName" value="{{ $lifeC->agent_name }}">
            <input type="hidden" name="voucherNo" id="voucherNo" value="{{ $lifeC->voucher_number }}">
            <input type="hidden" name="agentCode" id="agentCode" value="{{ $lifeC->agent_code }}">
            <input type="hidden" name="kraPin" id="kraPin" value="{{ $lifeC->kra_pin }}">
            <!--END-->
            <td class="add-color-dark">{{ $lifeC->agent_name }}</td>
            <td>{{ date( 'M j, Y', strtotime($lifeC->invoice_date)) }}</td>
            <td>{{ $lifeC->voucher_number }}</td>
            <td>{{ $lifeC->invoice_amount }}</td>
            <td>{{ $lifeC->kra_pin }}</td>
            <td>
                <span class="badge badge-danger">{{ $lifeC->payment_status }}</span>
            </td>
            <td>
                <button type="submit" class="btn btn-primary btn-sm" id="btnFront" style="cursor: pointer;"> Request </button>      
            </td>
        </tr>
    </form>     
    @endforeach
</tbody>
</table>

2-й макет, который отправляется, но thead смещен

 <table class="table table-hover mg-b-0 tx-14">
<thead>
<tr>
    <th>NAME</th>
    <th>INVOICE DATE</th>
    <th>VOUCHER NO.</th>
    <th>INVOICE AMOUNT</th>
    <th>KRA PIN</th>
    <th>STATUS</th>
    <th>PAYOUT</th>
</tr>
</thead>
</table>
<tbody>
        @foreach($medical as $lifeC)
        <!--Add the table insode the form-->
        <form method="POST" action="{{ route('b2b.medPayout') }}" id="payoutRequest">
          <table class="table table-hover mg-b-0 tx-11" id="policyTable">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  
            <tr>
                 <input type="hidden" name="agentName" id="agentName" value="{{ $lifeC->agent_name }}">
                <input type="hidden" name="voucherNo" id="voucherNo" value="{{ $lifeC->voucher_number }}">
                <input type="hidden" name="agentCode" id="agentCode" value="{{ $lifeC->agent_code }}">
                <input type="hidden" name="kraPin" id="kraPin" value="{{ $lifeC->kra_pin }}">

                <td class="add-color-dark">{{ $lifeC->agent_name }}</td>
                <td>{{ date( 'M j, Y', strtotime($lifeC->invoice_date)) }}</td>
                <td>{{ $lifeC->voucher_number }}</td>
                <td>{{ $lifeC->invoice_amount }}</td>
                <td>{{ $lifeC->kra_pin }}</td>
                <td>
                    <span class="badge badge-danger">{{ $lifeC->payment_status }}</span>
                </td>
                <td>
                    <button type="submit" class="btn btn-primary btn-sm" id="btnFront" style="cursor: pointer;"> Request </button>
                </td>
            </tr>
          </table>
        </form>     
        @endforeach
</tbody>

Снимок экрана

Answer 1

Если вы хотите сделать это таким образом, вам нужно будет сделать идентификаторы уникальными для ваших полей.Я предлагаю динамически устанавливать для них уникальные значения для каждой строки, например:

id="payoutRequest_$lifeC->agent_id"

для каждого значения, имеющего идентификатор.Идентификаторы всегда должны быть уникальными - это означает, что для каждой итерации вашего цикла отправляемые кнопки и данные будут уникальными для этой конкретной строки.

Answer 2

Я предлагаю вам воссоздать свой макет и использовать вместо него ajax.

При вашем текущем макете не только вы повторяете слишком много input type hidden, но и <form> повторяется в каждом цикле и у всех одинаковые id (даже кнопки, входы и т. Д.).

Попробуйте изменить кнопку на то, что передает данные в зависимости от того, в какой строке находится кнопка.