Conditionally render select boxes with autogenerated IDs

So I am trying to render different select boxes based upon the current value of another select box. The first select box is for a film name, and then the second select box shows the showings for that specific film. I could conditionally render the options inside, however, I just want to render the div as a whole.

I am doing this using the django framework. The code will produce something like this:

<div hidden id="Ice Age">
... Select box and options
</div>

<div hidden id="James Bond">
... Select box and options
</div>

I then want to access this div and remove the hidden tag, displaying the select box. I am however having issues with my javascript, as I cannot use query selector on the item, as the IDs are created conditionally.

Here is my attempt:

filmSelection.addEventListener('change', (event) => {
    const filmSelectionTemp = document.querySelector('#film'); // Get the film drop down
    let temp = '#' + event.target.value // Create the ID of the currently selected film
    const result = document.querySelector(temp); // Select that div
    result.classList.remove('hidden') // Remove hidden tag
})

This tells me : Uncaught TypeError: Cannot read properties of null (reading 'classList')

Not really sure what is going on.

New to javascript so pls be nice 🙂