Difficulty with blade foreach

Question

I am using Laravel 4.2 and I'm stuck in using a blade foreach loop to create a table. The table shows some records and when the user clicks on the details button, a bootstrap modal opens for that record. Unfortunately the opened modal just shows the details for the first record no matter which record is selected. Have you any suggestion?

<table id="issueListTable" class="table table-striped table-bordered hover"  style=" width: 100%; text-align: center;">
    <thead>
    <tr id="issueTableHead">
        <td style="width: 5%">شناسه</td>
        <td style="width: 60%" >عنوان</td>
        <td style="width: 35%">عملیات</td>
    </tr>
    </thead>
    <tbody>
    @foreach($issueList as $key => $value)
        <tr id="r{{$value->id}}">
            <td name="groupID">{{ $key+1 }}</td>
            <td name="groupName">{{ $value->name}}</td>
            <td>
                @if( Session::has('customerID'))
                    <a name="issueGlance" class="label label-info"  data-toggle="modal"
                       data-target="#basicModal" id="{{ $value->id }}" style="margin-left: 3px   " href="#"><i class="fa fa-eye"></i></a>
                    <a name="addToUser" class="label label-success" id="{{ $value->id }}"  href="#"><i class="fa fa-check-square"></i></a>
                @else
                    <a name="viewIssue" class="label label-primary" id="{{ $value->id }}" style="margin-left: 3px   " href="#"><i class="fa fa-pencil"></i></a>
                    <a name="deleteIssue" id="{{ $value->id }}" class="label label-danger" href="#"><i class="fa fa-times"></i></a>
                @endif
            </td>
            <!-- we will also add show, edit, and delete buttons -->
            <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" style="font-family: BYekan">
                    <div class="modal-dialog">
                            <div class="modal-content">
                                    <div class="modal-header" style="padding-bottom: 0; padding-top: 0">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="float: right; margin-top: 3px;">شرح مشکل</button>
                                        <h4 class="modal-title" id="myModalLabel" style="font-family: BYekan">{{$value->name}}</h4>
                                      </div>
                                    <div class="modal-body" style="padding-bottom: 0; padding-top: 0" >
                            <h4 style="margin-bottom: 0; margin-top: 0; font-family:BYekan">توصیف مشکل</h4>
                                            <h6 style="margin-top: 0; font-family:BYekan">{{$value->description}}</h6>
                            <h4 style="margin-top: 0; font-family:BYekan">راه حل</h4>
                            <h6 style="margin-top: 0; font-family:BYekan">{{$value->solution}}</h6>
                                        </div>
                                    <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">بستن</button> 
                                    </div>
                            </div>
                      </div>
            </div>

        </tr>

    @endforeach
    </tbody>
</table>

Answer 1

There are some problems in your code:

• First, your modal code should not be inside the tr element, put it out of the table or inside another td element.
• Second, each modal should have its unique id and the button of each row will use that modal id in data-target attribute. In your current implementation, all modal use the same id, which lead to the fact that only the first modal recognized.

Some updates:

• Change data-target="#basicModal" to data-target="#basicModal-{{ $value->id }}"

• Change the modal id from id="basicModal" to id="basicModal-{{ $value->id }}"

• Move the modal code inside the last td element of each row.