Generate a unique ID for each modal element to fix all modals opening up first PT

1 files changed, 11 insertions, 7 deletions

diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
index 297ee21..3ad50d1 100644
--- a/src/components/AssignLabs/PT.svelte
+++ b/src/components/AssignLabs/PT.svelte
@@ -2,11 +2,15 @@
     import type PeerTeacher from "../../models/PeerTeacher";
     import Icon from "../helpers/Icon.svelte";
     export let pt: PeerTeacher;
+
+    let modalID = () => {
+        return `my-modal-${pt.id}`;
+    }
 </script>
 
 <!-- PT Box -->
 <div
-    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
+    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden group"
 >
     <!-- Top half, name and button -->
     <div class="flex flex-row items-center ">
@@ -15,19 +19,19 @@
 
         <!-- Right half, button -->
         <!-- The button to open modal -->
-        <label for="my-modal-4" class="">
+        <label for={modalID()} class="">
             <Icon name="info" class="h-6 w-6" />
         </label>
 
         <!-- Modal PT event info -->
-        <input type="checkbox" id="my-modal-4" class="modal-toggle" />
-        <label for="my-modal-4" class="modal cursor-pointer">
-            <label class="modal-box relative" for="">
-                <h3 class="text-lg font-bold ">
+        <input type="checkbox" id={modalID()} class="modal-toggle" />
+        <label for={modalID()} class="modal cursor-pointer">
+            <label class="modal-box relative bg-slate-300" for="">
+                <h3 class="text-lg font-bold font-serif underline">
                     {pt.name}
                 </h3>
                 {#each pt.events as e}
-                    <p class="py-4">
+                    <p class="py-2">
                         {e.info}
                     </p>
                 {/each}