JS querySelector addEventListenerer index getElementsByClassName parent div only

I have a page with some images displayed as modals inside accordions, simple 3 image across grid- works as planned click on image modal with caption and close button displayed- these are “open one at a time” accordions- if A is opened B closes / if B is opened A closes / so only 1 accordion is expanded at a time

no navigation I used W3 schools CSS and JS samples to put together to achieve and works as I intended-

I needed navigation for the images once clicked simple back/forward/exit (or the square space grid gallery function)

I have been able to achieve the navigation function with JS query indexing a UL/list

However all images present on the page are indexed, and displayed instead of only the images inside the accordion


-Accordion A has 10 images

-Accordion B has 7 images

-Accordion C has 9 images

26 images are indexed and cycled thru no matter what image or what accordion is clicked on-

Desired results:

After an image is clicked inside accordion B modal pops up with navigation cycling thru only the 7 images inside Accordion B and the navigation stops once last image is reached.

The same for the other images inside the other accordions, regardless of number of images and position in document, only the images contained within that accordion are cycled.

it was suggested to me at another forum to look at var images = activeSection.querySelectorAll('img');
so it would only index the active section, which makes sense, however; I could not figure out where to insert and what to change in order for the var to work