I'm trying to display some location "cards" by iterating through the relevant locations Collection. When you click on a card it pops up a modal with further information.
The problem I'm having is that the modal seems to exit the iterating loop, so every entry is just pulling the data from the first entry in the Collection. I assume the modal exists outside the loop? Is there a way to achieve this?
{{ collection:locations }}
<button
type="button"
data-hs-overlay="#hs-slide-up-animation-modal">
{{ partial:partials/location }}
</button>
<div id="hs-slide-up-animation-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-14 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
<div class="flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
<h3 class="font-bold text-gray-800 dark:text-white">
{{ location_name }}
</h3>
<button type="button" class="hs-dropup-toggle flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-slide-up-animation-modal">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="p-4 overflow-y-auto">
<p class="mt-1 text-gray-800 dark:text-gray-400">
{{ location_desc }}
</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-gray-700">
<button type="button" class="hs-dropup-toggle py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-slide-up-animation-modal">
Close
</button>
</div>
</div>
</div>
</div>
{{ /collection:locations }}
The first location in the locations Collection:
How it appears on the site (unfinished):
When you click the 2nd location card, it displays info from the 1st entry:
