I am using for loop to display all the results retrieved from a query and for the toggle button and date range to be available for each result. Date range works fine but the issue is toggle button isn’t working. Only the first one works and if I click on the rest of them it will toggle the first one
<table colspan="3">
<tr>
<td> <?= Html::a('Add Desk', Url::toRoute('@DeskBooking_AddDesk',['class' => 'btn btn-lg btn-block btn-success']); ?> </td>
</tr>
</table>
/* Tables***/
<div>
<?php if (!empty($result)): ?>
<table id="deskManagement" class="table table-striped table-hover table-bordered w-100">
<thead class="thead-dark">
<tr>
<th>Desks</th>
<th>Start Date</th>
<th>End Date</th>
<th> Desk Status </th>
<th> Save changes</th>
<th> Delete Desk Permanently</th>
</tr>
</thead>
<tbody>
/*For loop to repeat the date range and toggle based on each */
<?php foreach ($result as $r):
?>
<form>
<tr>
/*Desk number*/
<td><?= $r['desk_Id'] ?></td>
/*start date*/
<td> <div class="col-12 offset-sm-2 col-sm7 offset-md-1 offset-lg-0 offset-xl-0 col-md mt-1 mt-md-0 px-0" id="dateRange" method="post" class="row no-gutters align-items-center form-group">
<input type="hidden" name="_csrf-frontend" value="<?= Yii::$app->request->getCsrfToken() ?>"/>
<input type="text" value="<?= date('Y-m-d', $requestDate); ?>" class="closing_date" name="closing_date"
class="form-control col" autocomplete="off"/>
</div></td>
/*End date*/
<td> <div class="col-12 offset-sm-2 col-sm7 offset-md-1 offset-lg-0 offset-xl-0 col-md mt-1 mt-md-0 px-0" id="dateRange" method="post" class="row no-gutters align-items-center form-group">
<input type="hidden" name="_csrf-frontend" value="<?= Yii::$app->request->getCsrfToken() ?>"/>
<input type="text" value="<?= date('Y-m-d', $closingDate); ?>" class="closing_date" name="closing_date"
class="form-control col" autocomplete="off"/>
</div>
</td>
/* Toggle button */
<td> <div class="row no-gutters align-items-center">
<div class="col-auto pr-2">
<label class="switch" for="activeOnly">
<input type="hidden" name="activeOnly" value="0">
<input type="checkbox" id="activeOnly" name="activeOnly" class="onoffswitch-checkbox" checked="checked"/>
<span class="slider round"></span>
</label>
</div>
</div>
</td>
<td>
<div>
<?= Html::submitButton('Save', ['name' => 'PageSubmit', 'class' => 'btn btn-block btn-success']); ?>
</div>
</td>
<td>
<div>
<?= Html::submitButton('Delete Desk', ['name' => 'PageDelete', 'class' => 'btn btn-block btn-danger']); ?>
</div>
</td>
</tr>
<?php endforeach; ?>
</form>
</tbody>
</table>
<?php endif; ?>
/* Javscript*/
<?php $this->beginBlock('javascript'); ?>
<script type="text/javascript">
<?php foreach ($result as $r):
?>
$('.request_date').datepicker({
'dateFormat': 'yy-mm-dd',
'maxDate': '<?= date('Y-m-d', strtotime('+30 days')); ?>',
'minDate': '<?= date('Y-m-d', strtotime('now')); ?>',
'onSelect': function (selected) {
$('#dateRange').submit();
}
});
$('.closing_date').datepicker({
'dateFormat': 'yy-mm-dd',
'maxDate': '<?= date('Y-m-d', strtotime('+30 days')); ?>',
'minDate': '<?= date('Y-m-d', strtotime('now')); ?>',
'onSelect': function (selected) {
$('#dateRange').submit();
}
});
<?php endforeach; ?>
</script>
<?php $this->endBlock(); ?>