How to create this list in modals?

[it_dev]

This is the image

This is my code

<table class="table table-bordered" id="tblTeachers">
                    <thead>
                       <tr>
                        <?php
                            $days=array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
                            for ($i=0;$i<COUNT($days);$i++) { 
                                echo "<th>".date("D m/d",strtotime(" +".$i." days"))."</th>";
                                //echo "<th>".$days[$i]."</th>";
                            }
                         ?>
                       </tr>
                    </thead>
                    <tbody>
                    <?php
                        $timer_schedule=create_time_range("08:00","22:00","30 mins","12");
                        foreach ($timer_schedule as $value) {
                                echo "<tr>";
                                for ($a=0;$a<COUNT($days);$a++) { 
                                    $get_class_schedule=getData("SELECT CONCAT(user.fname,' ',user.lname) AS teacher FROM acadsoc_class_schedule LEFT JOIN user ON acadsoc_class_schedule.username=user.username WHERE class_time=? AND class_day=? AND class_date=?",array($value,$days[$a],date("Y-m-d")));
                                echo "<td>";
                                 ?>
                                 <label><?php echo $value; ?></label>
                                  <a class="btn btn-primary btn-sm btn-view-sched" data-toggle="modal" data-target="#viewTeachers" class_time="<?php echo $value ?>" class_teacher="<?php echo $get_class_schedule[0]->teacher ?>" style="padding: 1px 6px; float: right;" title="Disposition"><i class="fas fa-eye"></i></a>
                                </td>
                                <?php }
                                echo "</tr>";
                            }
                    ?>
                    </tbody>
                </table>

<div id="viewTeachers" class="myModal" style="overflow:auto">
    <div class="modalContent" style="margin-bottom: 20px;">
        <button class = "closeModal">&times;</button>
        <div class="modal-head">
            <h4> <span class=  "fa fa-pencil"></span> View Teachers for <span id="view_class_time"></span> </h4>
        </div>
        <div class="modal-body">
            <ul class="list-group">
                <li class="list-group-item" id="get_class_teacher"></li>
            </ul>
        </div>
    </div>
</div>

<script>
$(document).on("click",".btn-view-sched",function(){
    $("#view_class_time").text($(this).attr("class_time"));
    var class_teacher=$('.btn-view-sched').map(function(_, values) {
        return $(values).attr("class_teacher")
    }).get();
    $("#get_class_teacher").text(class_teacher);
    $(".myModal").fadeIn(300);
});

$(document).on("click",".closeModal",function(){
    $(".myModal").fadeOut(300);
});
$(document).ready(function() {
    $("[data-toggle]").tooltip();
});
$('#example').DataTable({
    responsive: true ,
    "order": [[ 0 , "desc" ]]
});
</script>

[Paul_Wilkins]

It already looks to be modal, which is where the dialog is in a different mode (thus being modal) from the rest of the page, resulting in only the dialog being capable of being interacted with until you dismiss the dialog, and can return back to the original mode where the full page can be interacted with. That is modal.

Can we get more detail about what is wanted?

[it_dev]

Actually, I want that kind of list but its not working on my JavaScript because what I did is I declare an attribute inside the td tag <a class="btn btn-primary btn-sm btn-view-sched" data-toggle="modal" data-target="#viewTeachers" class_time="<?php echo $value ?>" class_teacher="<?php echo $get_class_schedule[0]->teacher ?>" style="padding: 1px 6px; float: right;" title="Disposition"><i class="fas fa-eye"></i></a>

You will see the attribute → class_teacher=“<?php echo $get_class_schedule[0]->teacher ?>” and in the javacript I created a array map

var class_teacher=$('.btn-view-sched').map(function(_, values) { return $(values).attr("class_teacher") }).get(); $("#get_class_teacher").text(class_teacher);

Inside the modal is this
<div class="modal-body"> <ul class="list-group"> <li class="list-group-item" id="get_class_teacher"></li> </ul> </div>
The id=“get_class_teacher”