How do I show different modal data on each subjects displayed? - loops

Question

How do I show different modal data on each subjects displayed?
My Problem: Showing same modal data on each subjects displayed.
My blade view
#section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">
<div class="subjects-content">
<h3>List of Subjects</h3>
<div class="box-body box-self-evaluation" v-show="subjects.length > 0">
<table id="example2" class="table table-hover table-striped sortable">
<thead>
<tr>
<th>Subject Area</th>
<th>Course Title</th>
<th>Failed</th>
<th>View more</th>
</tr>
</thead>
#foreach ($all_subjects as $subject)
<tbody>
<tr>
<td>
<span> {{ $subject->subject_code }}</span>
</td>
<td>
<span> {{ $subject->description }} </span>
</td>
<td>
<span> {{ $subject->grade()->where('grade','F')->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal">View more info</div> </span></td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div class="confirmation-buttons-self-evaluation">
<div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>
#foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- MODAL content -->
<div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
</div>
<div class="modal-body" style="padding-top:0">
<center>
<table class="table">
<thead>
<th colspan="3" style="text-align:center">List of Disgraceful Students</th>
</thead>
<thead class="failed-header">
<th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
<th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
<th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
</thead>
<tbody>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Jashuel </td>
</tr>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Caezar </td>
</tr>
</tbody>
</center>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
#endforeach
</section>
#endsection
what is wrong with my code?
how do I solve this?
help me please...
any suggestion or comments are well appreciated thank you!

Answer 1

try to change
data-target="#myModal"
to
data-target="#{{$subject->id}}"
and id in <--modal-->
From
id="myModal"
to
id="{{$subject->id}}"