I am facing an issue with a datepicker input inside a while loop for generating dynamic data. The problem is that the datepicker only seems to work on the first input. How can I rectify this?
Here is my blade:
<div class="row">
@foreach ($kelas as $x)
<div class="col-6">
<div class="card">
@include('flashmessage')
<div class="card-body">
<p style="font-weight: 800;"> Nama Kelas : {{ $x->nama_kelas }} - {{ $x->matkul }} </p>
<p style="font-weight: 800;"> Nama Modul : {{ $x->modul }} </p>
<div class="col-md-12">
<div class="mb-3">
<label class="form-label">Tanggal Praktek</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="dd M, yyyy" data-date-format="dd M, yyyy"
data-date-container='#datepicker' data-provide="datepicker" id="datepicker{{$x->id_modulkelas}}">
<span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
</div><!-- input-group -->
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
This will create multiple rows with a datepicker input for each data entry in $kelas. And here is my JavaScript script:
<script>
$( function() {
$( "#datepicker{{$x->id_modulkelas}}" ).datepicker();
} );
</script>
I have tried adding unique IDs as shown above. Currently, the datepicker only appears on the first row input. When I click on another input, the datepicker does not appear. How can I ensure the datepicker appears on all row inputs?