Показать модальное окно внутри скользящего слайдера

У меня есть модальное окно, которое отображает контактную форму внутри скользящего слайдера. Слайдер — это расписание занятий, извлекаемое из API. Проблема, с которой я сталкиваюсь, заключается в том, что модал содержит форму для бронирования каждого класса через цикл. Если я переместу модальный режим за пределы ползунка, он не отображается или не работает, и кажется, что он захватывает только один класс. Я пытался переместить все вокруг, но не могу заставить его работать должным образом при нажатии, чтобы открыть. Я вынул большую часть модального кода для простоты, чтобы прочитать ниже

<div class="main-table-container">
<div class="table-upper">
<div class="schedule_heading">Book Your Class Today!</div>
<div class="date">
<p>Select a date to view class availability</p>
<form action="" method="post" id="FromDate">
<input type="text" id="datepicker" value="" name="FromDate" onchange="this.form.submit()"><i class="fa fa-calendar" aria-hidden="true"></i>
</form>
</div>
<div class="class-slider">
<span class="prev-slide"><i class="fas fa-angle-left"></i> Previous Day</span>
<span class="next-slide">Next Day <i class="fas fa-angle-right"></i></span>
</div>
</div>
<div class="schedule_wrapper">
<div class="schedule_container">
<?php
$dateD = array_column($data, 'Date');
$dateD = array_unique($dateD);
foreach($dateD as $dat) {

$exp = explode("-", $dat);
$m = $exp[0];
$d = $exp[1];
$y = $exp[2];

$nD = $y."-".$m."-".$d;

$d = new DateTime($nD);
$newDate = $d->format('D F d');
?>
<div class="schedule_item">
<div class="date-heading"><?php echo $newDate; ?></div>
<?php
foreach ($data as $item) {
$chkCu = date('n-j-Y');
if($item['Date'] == $dat) {
?>
<div class="modal fade" id="book-schedule-<?php echo $item['ScheduleId']; ?>" tabindex="-1" role="dialog" aria-labelledby="book-schedule-<?php echo     $item['ScheduleId']; ?>" aria-hidden="true">
</div>
<?php

$startTime = strtotime($item['StartTime']);
$endTime = strtotime($item['EndTime']);

$chkAvaDate = $dat;
$chkCu = date('n-j-Y');
}
if($item['FreeSpots'] == 0) {
$freeBtn = "<span class='date-passed'>No Spots Available</span>";
}
else {
$freeBtn = "<span class='free-chk' data-toggle='modal' data-target='#book-schedule-".$item['ScheduleId']."'>Sign Up</span> ";
}

if($item['InstructorFirstName'] || $item['InstructorLastName']) {
$instructor = $item['InstructorFirstName'] ." ". $item['InstructorLastName'];
}
else {
$instructor = "<span class='no-instructor'>No Instructor Yet</span>";
}
?>

<div class="schedule_item_box">
<div class="class_start"><?php echo $item['StartTime']; ?>
<em class="class_time"><?php echo human_readable_time_B($endTime-$startTime); ?></em>
</div>
<div class="class_title"><?php echo $item['Title']; ?></div>
<div class="class_date" style="display:none;"><?php echo $item['Date']; echo $chkCu; ?></div>
<div class="class_instructor"><?php echo $instructor; ?></div>
<div class="class_btn"><?php echo $freeBtn; ?></div>
</div>
<?php
}
}
?>
</div>
<?php
}
?>
</div>
<?php
}
?>

</div>
</div>
</div>
</div>
<?php endif;?>
<script>
jQuery(document).ready(function($) {
$('.schedule_container').slick({
autoplay: true,
prevArrow: $('.prev-slide'),
nextArrow: $('.next-slide'),
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,

});
});
</script>

Нужно ли снова запускать для каждого отдельно?