How to pass data to edit modal from #foreach - php

Question

<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">×</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?

Answer 1

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