give each genrePicker cell a unique form id

src/app/ui/tables/inputs/genrePickerInput.tsx

@@ -24,25 +24,25 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
   const genres = props.table.options.meta.genres
   const [isActive, setIsActive] = useState(false)
 
-  async function onSubmit({ genres }: { genres: number[] }, event: Event) {
+  async function onSubmit({ genres }: { genres: number[] }) {
     event.preventDefault()
     const genresArray = genres.map((e) => { return { id: e } })
     console.log(`genres: ${genres}, genresArray: ${JSON.stringify(genresArray)}`)
-    // toast({
-    //   title: "You submitted the following values:",
-    //   description: (
-    //     <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-    //       <code className="text-white">{JSON.stringify(genres)}</code>
-    //     </pre>
-    //   ),
-    // })
-    // const res = await updateGenres({
-    //   id,
-    //   table,
-    //   genres: genresArray,
-    //   pathname
-    // })
-    // setIsActive(false)
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(genres)}</code>
+        </pre>
+      ),
+    })
+    const res = await updateGenres({
+      id,
+      table,
+      genres: genresArray,
+      pathname
+    })
+    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -65,11 +65,14 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
       genres: value.map(e => e.id)
     }
   })
+
+  const formId = "editGenresForm" + props.cell.id
+
   return (
 
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id="editGenresForm">
-        <Popover modal={true}>
+      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id={formId}>
+        <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)}>
           <FormField
             control={form.control}
             name="genres"
@@ -119,7 +122,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
                       }}
                     />
                   ))}
-                  <Button variant="ghost" form="editGenresForm">Submit</Button>
+                  <Button variant="ghost" form={formId}>Submit</Button>
                   <Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
                 </PopoverContent>
                 <FormMessage />