Modal in a component duplicates the first modal into other modals

[m40ma0]

Hi, I have a modal in a component, but it dupllicates the first modals information into other modals.

Component:

<script>
	export let title;
	export let image;
	export let alternate;
	export let popupTitle;
	export let popupDescription;
</script>

<div class="ui-card rounded">
	<img src={image} alt={alternate} />
	<div class="description">
		<h3>{title}</h3>
		<br />

		<!-- Learn more button -->
		<div class="buttonContainer modal-button">
			<button>
				<div>
					<span class="circle">
						<span class="icon arrow" />
					</span>
				</div>
				<label for="my-modal" class="buttonText hover:cursor-pointer">Learn More</label>
			</button>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modals">
	<input type="checkbox" id="my-modal" class="modal-toggle" />
	<label for="my-modal" class="modal cursor-pointer sm:modal-middle">
		<label class="modal-box relative border-0 bg-zinc-300" for="">
			<div class="ring-0 card glass">
				<figure class="h-30"><img src={image} alt={alternate}/></figure>
				<div class="card-body flex flex-col gap-4">
					<h2 class="card-title">{popupTitle}</h2>
					<p>{popupDescription}</p>
				</div>
			</div>
		</label>
	</label>
</div>

Main:

import Card from "../components/work-card.svelte";
let workCards = [
		{
			title: 'The Beginning',
			image: 'portfolioImage1.png',
			alt: 'Portfolio 1',
			popupTitle: 'Hi',
			popupDescription: 'Ok'
		},
		{
			title: 'Title 2',
			image: 'portfolioImage3.png',
			alt: 'Portfolio 2',
			popupTitle: 'Hello',
			popupDescription: 'Testing',
		},
		{
			title: 'Placeholder',
			image: 'portfolioImage3.png',
			alt: 'Portfolio 3',
			popupTitle: 'HI',
			popupDescription: 'lol',
		},
		{
			title: 'Hello',
			image: 'portfolioImage1.png',
			alt: 'Portfolio 4',
			popupTitle: 'ok',
			popupDescription: 'nice',
		},
	]

[saadeghi]

I can't be sure about the cause of problem unless you provide a sample repo so I can run your code...
But I think the problem here is the id="my-modal". In your component, all modals have the same my-modal IDs following by the same <label for="my-modal">. Each modal should have a unique ID and the following label to point to the same ID.