how, to achieve a filtered content from Django backend to my webpage

Question

this is a web page, called description.html

 <button class="book-ticket" onclick="navigateToShowPage()" >Book Ticket</button>
        </div>
    </div>
    <script>
     function navigateToShowPage() {
    // Get movie name and city from the URL or any other source
    var movieName = '{{ movie.name }}'; // Get movie name from the backend
    var cityName = '{{ city }}'; // Get city name from the backend
    
    // Redirect to the shows page with query parameters
    window.location.href = `/shows/${movieName}/?city=${cityName}`;
     }
  
</script>

now what i want is that when user click on the button it, navigates to shows.html page

<h1>Screen</h1>
<div class="container">
    <div class="navbar">
        <div class="date-box">24</div>
        <div class="date-box">25</div>
        <div class="date-box">26</div>
        <div class="date-box">27</div>
        <div class="date-box">28</div>
    </div>

    <div>
        <h2>Theatre A</h2>
        <div class="show-container">
            <div class="show-box">Show 1: 10:00 AM</div>
            <div class="show-box">Show 2: 2:00 PM</div>
            <div class="show-box">Show 3: 6:00 PM</div>
        </div>
    </div>
    <div>
        <h2>Theatre B</h2>
        <div class="show-container">
            <div class="show-box">Show 1: 11:00 AM</div>
            <div class="show-box">Show 2: 3:00 PM</div>
            <div class="show-box">Show 3: 7:00 PM</div>
        </div>
    </div>
</div>

and now here i want website to show the dates in nav bar and cinema hall name in h2 and show timings, show-box , and want this all to take from backend django, models,

class Show(models.Model):
    movie = models.ForeignKey(Movie, on_delete=models.CASCADE)
    cinemahall = models.ForeignKey(CinemaHall, on_delete=models.CASCADE, null=True)
    city = models.ForeignKey(City, on_delete=models.CASCADE)
    timings = models.CharField(max_length=100)
    date = models.DateField(default=date.today)
    NumOfSeats = models.BigIntegerField(default=200)

    def __str__(self):
        return f"{self.movie.name} - {self.cinemahall.name} - {self.timings} - {self.date} - {self.NumOfSeats}"

now the function i want is that, take the movie name and city name form the description.html's url , so in index.html there are cards of different movie when we click on them we navigates to description.html

function displayMovies(movies) {
    const movieList = document.getElementById('movieList');
    movieList.innerHTML = '';
    const selectedCity = document.getElementById('selectedCity').innerText; // Retrieve selected city
    movies.forEach(movie => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.innerHTML = `
            <img src="${movie.image}" alt="${movie.image}">
            <div class="overlay">
                <p>Movie name: ${movie.name}</p>
            </div>
        `;
        // Add click event listener to each card
       card.addEventListener('click', function() {
    window.location.href = `/movie-details/${movie.name}/?city=${encodeURIComponent(selectedCity)}`;
});
        movieList.appendChild(card);
    });
}

so i want that only show dates of particular movie in particular city in the shows.html use filter and then i want is that like when user click on a particular date, then on that date , show only those shows that are running on that day of that movie in that city , so please help me how i achieve this how i do this , i tried different methods , but getting failed