How to pass data to edit modal from @foreach-CodePudding

<tbody>
            @foreach($courses as $course)
                <tr>
                    <td>{{ $course->course_code }}</td>
                    <td>{{ $course->course_name }}</td>
                    <td>{{ $course->description }}</td>
                    @if(is_null($course->teacher))
                        <td></td>
                    @else
                    <td>{{ $course->teacher->last_name }}, {{ $course->teacher->first_name }}</td>
                    @endif
                    <td>
                        <button type="button" class="assign-modal btn btn-sm btn-success" data-toggle="modal" data-target="#assignModal" data-id="{{ $course->id }}">
                            <i class="bi bi-person-plus"></i>
                        </button>
                    </td>
                </tr>
            @endforeach

This is my table body

<!-- Assign Modal -->
<div class="modal fade" id="assignModal" tabindex="-1" role="dialog" aria-labelledby="assignModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignModalLabel">Assign Teacher</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @if(!empty($course->id))
                    <form method="POST" action={{ route('courses.update', $course->id) }}>
                        @csrf
                        @method('PUT')
                        <input type="text" class="form-control" name="id" value="" id="course-id" hidden="">
                        <select class="form-control select-teacher" style="widht: 100%" name="teacher_id">
                            @foreach($teachers as $teacher)
                                <option value="{{ $teacher->id }}">{{ $teacher->last_name }}, {{ $teacher->first_name }}</option>
                            @endforeach
                        </select>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Assign</button>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>


<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

This is my Modal.

Apparently, it was working fine until yesterday, but It's no longer work. The problem now with my code is that only the last column of data is editable. How can I modify the values of other columns?

CodePudding user response：

each modal must have a specific id, try by adding {{ $course->id }} to tag id and aria-labelledby attribute

<div class="modal fade" id="assignModal{{ $course->id }}" tabindex="-1" role="dialog" aria-labelledby="assignModalLabel{{ $course->id }}" aria-hidden="true">

the previous code must also be inside a foreach loop as the first one in tbody

@foreach($courses as $course)
    <div class="modal fade" id="assignModal{{ $course->id }}" tabindex="-1" role="dialog" aria-labelledby="assignModalLabel{{ $course->id }}" aria-hidden="true">
        ...
    </div>
@endforeach

And also update all id in modal tag as previous An id must be unique.

And also update as following to attach button to the specific id

<button type="button" class="assign-modal btn btn-sm btn-success" data-toggle="modal" data-target="#assignModal{{ $course->id }}" data-id="{{ $course->id }}">