Clicking on a single button on table in a foreach loop not working

Question

I am working on a Laravel application whereby I have some data that is generated from the backend and am displaying on the view in the form of a table. On the table am doing a foreach loop inside the tbody whereby I display each row together with a button the user can click to submit the data of that particular row. The problem is that when the user clicks on each button on the row nothing happens but when I change the html structure of the table the data gets submitted but the table headers get mis-aligned henceforth destroying the User interface

1st layout which doesnt submit anything after a button is clicked

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

2nd layout that submits but the thead are misaligned

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

Screenshot

party-ring party-ring · Accepted Answer · 2018-12-18T10:01:27

If you would like to do it this way, you will need to make the IDs unique for your fields. I suggest dynamically setting them with a unique value for each row, something like:

id="payoutRequest_$lifeC->agent_id"

for every value that has an ID. IDs should always be unique - this means that for each iteration of your loop, the buttons and data being submitted will be unique to that specific row.

Clicking on a single button on table in a foreach loop not working

2 Answers