Currently I have an index.php page that looks like this:

This is my code:

index.php:

<div style="width: 90%; margin:0 auto;">
        <form class="mb-3" style="width: 150px;">
            <label for="floor">Floor:</label>
            <select class="form-select" name="floor" id="floorSelect" onkeyup="filterByFLoor()">
                <option value="" selected>All Floors</option>
                <?php
                $sql = "SELECT * FROM d_floor";
                $floors = mysqli_query($conn, $sql);
                while ($floor = mysqli_fetch_array($floors, MYSQLI_ASSOC)):
                    ;
                    ?>
                    <option value="<?php echo $floor['fname']; ?>">
                        <?php echo $floor['fname']; ?>
                    </option>
                <?php endwhile; ?>
            </select>
        </form>
</div>

<div id="displayTable" class="mt-3" style="width: 90%; margin:0 auto;"></div>

<script src="tables/table.js"></script>

<script>
function filterByFloor() {
            var selectJob = document.getElementById("floorSelect"),
                table = document.getElementById("displayTable"),
                tr = table.getElementsByTagName("tr");

            for (var i = 1; i < tr.length; i++) {

                floor = tr[i].getElementsByTagName("td")[9]; // use [0] as the first `td`
                console.log(floor);

                if (floor && floor.innerHTML.indexOf(selectJob.value) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }

            }
        }

        // listen to select changes
        document.querySelector('#floorSelect').addEventListener('change', function (e) {
            filterByFloor();
});
</script>

table.js:

//display open table
function displayOpen() {
    var displayOpen = "true";
    $.ajax({
        url: "open.php",
        type: 'post',
        data: {
            displaySend: displayOpen
        },
        success: function (data, status) {
            $('#displayTable').html(data);
        }
    })
}

open.php:

<h2>OPEN</h2>
<?php
// date_default_timezone_set('Asia/Jakarta');
// $currentDateTime = date('Y-m-d H:i:s');
// echo $currentDateTime;
include 'database/connect.php';

if (isset($_POST['displaySend'])) {
    $table = '<table class="table table-sm table-bordered table-striped table-hover">
                <thead class="text-center align-middle">
                    <tr>
                        <th scope="col">NO</th>
                        <th scope="col">DETAILS</th>
                        <th scope="col">MODEL</th>
                        <th scope="col">PIC</th>
                        <th scope="col">OPEN DATE</th>
                        <th scope="col">TARGET DATE</th>
                        <th colspan="3" scope="col">REMARKS</th>
                        <th scope="col">FLOOR</th>
                        <th scope="col">ACTION</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider" style="font-size:0.9rem;">';
    $sql = "SELECT * FROM d_mom WHERE status='OPEN' ORDER BY opendate DESC";
    $result = mysqli_query($conn, $sql);
    $number = 1;
    while ($row = mysqli_fetch_assoc($result)) {
        $id = $row['momid'];
        $details = $row['momdetails'];
        $model = $row['model'];
        $pic = $row['pic'];
        $opendate = $row['opendate'];
        $targetdate = $row['targetdate'];
        $remarks = $row['remarks'];
        $updatedate = $row['updatedate'];
        $updateby = $row['updateby'];
        $floor = $row['floor'];
        // $status = $row['status'];
        $table .= '
                    <tr>
                    <td scope="row" class="text-center">' . $number . '</th>
                    <td>' . $details . '</td>
                    <td class="text-center">' . $model . '</td>
                    <td class="text-center">' . $pic . '</td>
                    <td class="text-center">' . $opendate . '</td>
                    <td class="text-center">' . $targetdate . '</td>
                    <td>' . $remarks . '</td>
                    <td class="text-center">Updated on: ' . $updatedate . '</td>
                    <td>By: ' . $updateby . '</td>
                    <td class="text-center">' . $floor . '</td>
                    <td class="text-center">
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Action
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Update</a></li>
                                <li><a class="dropdown-item" href="#" onclick="updateToUM(' . $id . ')">Under Monitoring</a></li>
                                <li><a class="dropdown-item" href="#" onclick="updateToClosed(' . $id . ')">Closed</a></li>
                                <li><a class="dropdown-item" href="#" onclick="deleteMoM(' . $id . ')">Delete</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>';
        $number++;
    }
    $table .= '</tbody>
               </table>';
    echo $table;
}

?>

With the code above I’m able to display the table as pictured. But when I put open.php inside the tables folder, it will no longer display the table. I tried changing the url to tables/open.php, /tables/open.php, ../tables/open.php, mom_tracking/tables/open.php, but nothing works.