在jQuery Click Function之后加载MySQL数据？

Question

I have a php page that loads in (the links to) images and their respective data from a MySQL table. Each image that displays on the page is the first image of an album.

Table 1

id  |  screeningId  |  mainImageUrl  |  movie  |  venue  |  location  |  date

 1          1            red.jpg       Movie1     Venue1    Location1    2015
 2          2            blue.jpg      Movie2     Venue2    Location2    2016
 3          3            orange.jpg    Movie3     Venue3    Location3    2016
 4          4            white.jpg     Movie4     Venue4    Location4    2017

When I click an image, I want to load in the rest of the images in a pop-up gallery - images which are stored in a different MySQL table.

Table 2

id | screeningId | imageUrl
 1        1        red2.jpg
 2        1        red3.jpg
 3        1        red4.jpg
 4        1        red5.jpg
 5        1        red6.jpg
 6        1        red7.jpg
 7        2        blue2.jpg
 8        2        blue3.jpg
....
....

For instance, if I click on red.jpg (from table 1), I want to load into the pop-up gallery all the images from table 2 with a screeningId value of 1.

Clicking on an image from table 1 triggers a jQuery function:

$(".img_div").click(function() {...}

..which opens the pop-up window. I would also like to load in the images from Table 2 at this point. This is where I'm stuck.

I tried pulling the Table 2 data by nesting php tags within the click function, but this proved problematic and ridiculous.

I also considered Pulling all Table 2 data and storing it in an array when the page loads, but is that necessary?

How should I do this?

---

Attempted Data Pull from within Script

    $(".img_div").click(function() {

    <?php
        $sql = "SELECT * FROM screeningsImages WHERE screeningId = 1";
        $result = mysqli_query($db, $sql);
        while ($row = mysqli_fetch_array($result)){
        ....
        }
    ?>