Something like this?
CODE
<?php
include 'db_inc.php'; // YOUR CONNECTION
$pdo = pdoConnect('movies'); // CODE GOES HERE
################################################################################
## PROCESS AJAX REQUESTS
################################################################################
if (isset($_GET['ajax'])) {
$res = $pdo->prepare("SELECT m.id as movie_id
, m.title
, m.image
, g.description as genre
, CONCAT(m.running_time DIV 60, ' hrs ', m.running_time % 60, ' mins') as running_time
, date_format(sg.screen_on, '%W, %D %b') as date
, s.name as screen_num
, TIME_FORMAT(sg.screen_at, '%H:%i') as start_time
FROM screening sg
JOIN screen s ON sg.screen_id = s.id
JOIN movie m ON sg.movie_id = m.id
JOIN genre g ON g.id = m.genre
WHERE dayname(screen_on) = :day
ORDER BY movie_id, screen_on, sg.screen_at
");
$res->execute([ 'day' => $_GET['day'] ]);
$data = [];
#
# Put data into an array with same structure a required output
# - array of movies, each movie having arrays of screenings
#
foreach ($res as $r) {
if (!isset($data[$r['movie_id']])) {
$data[$r['movie_id']] = [ 'title' => $r['title'],
'image' => $r['image'],
'genre' => $r['genre'],
'runtime' => $r['running_time'],
'screenings' => []
];
}
$data[$r['movie_id']]['screenings'][$r['date']][] = ['start' => $r['start_time'],
'sno' => $r['screen_num']
];
}
exit(json_encode($data));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="PhpED 12.0 (Build 12010, 64bit)">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>olumide</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type='text/javascript'>
function showScreenings(day)
{
$("#movie-listings").html("")
$.get(
"",
{"ajax":1, "day":day},
function(resp) {
$.each(resp, function(mid, mdata) {
let title = `<h2>${mdata.title}</h2><h4 class='w3-text-gray'>${mdata.genre} (${mdata.runtime})</h4>`
$("#movie-listings").append(title)
$.each(mdata.screenings, function(dt, ddata) {
let datesub = `<h3>${dt}</h3>`
$("#movie-listings").append(datesub)
$("#movie-listings").append("<div class='screenings'")
$.each(ddata, function(k, sdata) {
let scr = `<div class='screening'><b>${sdata.start}</b><br>${sdata.sno}</div>`
$("#movie-listings").append(scr)
})
$("#movie-listings").append("</div>")
})
})
},
"JSON"
)
}
</script>
<style type='text/css'>
.days {
padding: 16px;
text-align: center;
}
.screening {
width : 20%;
display: inline-block;
margin-right: 16px;
margin-bottom: 8px;
padding: 4px;
border: 5px solid black;
font-size: 9pt;
}
</style>
</head>
<body>
<nav class="days">
<button onclick="showScreenings('Monday')">Monday</button>
<button onclick="showScreenings('Tuesday')">Tuesday</button>
<button onclick="showScreenings('Wednesday')">Wednesday</button>
<button onclick="showScreenings('Thursday')">Thursday</button>
<button onclick="showScreenings('Friday')">Friday</button>
<button onclick="showScreenings('Saturday')">Saturday</button>
<button onclick="showScreenings('Sunday')">Sunday</button>
</nav>
<div id='movie-listings'class='w3-content w3-padding w3-card-4'>
<!-- LISTINGS GO HERE -->
</div>
</body>
</html>