title: Tailwind/Flowbite modal not working with Vue.js 3 v-for
body: <p>I am trying to call a tailwind modal from a table where the rows are generated from a for loop in vue.js with <code>v-for</code>, but the modal fails to be called. However I generate the table without the for loop it works just fine. Here is the code:</p>
  <h3>Table code (with v-for loop)</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;overflow-x-auto relative sm:rounded-lg my-5 scrollbar-style&quot;&gt;
    &lt;table
      class=&quot;w-full text-sm text-left text-gray-700 dark:text-gray-400 relative&quot;
    &gt;
      &lt;thead
        class=&quot;text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400&quot;
      &gt;
        &lt;tr&gt;
          &lt;th scope=&quot;col&quot; class=&quot;py-3 px-6&quot;&gt;ID&lt;/th&gt;
          &lt;th scope=&quot;col&quot; class=&quot;py-3 px-6&quot;&gt;Product name&lt;/th&gt;
          &lt;th scope=&quot;col&quot; class=&quot;py-3 px-6&quot;&gt;Description&lt;/th&gt;
          &lt;th scope=&quot;col&quot; class=&quot;py-3 px-6&quot;&gt;Price&lt;/th&gt;
          &lt;th scope=&quot;col&quot; class=&quot;py-3 px-6&quot;&gt;&lt;/th&gt;
          &lt;th scope=&quot;col&quot; class=&quot;py-3 px-6&quot;&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;template v-for=&quot;product in products&quot; :key=&quot;product.id&quot;&gt;
          &lt;tr
            class=&quot;bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:opacity-75&quot;
          &gt;
            &lt;th
              scope=&quot;row&quot;
              class=&quot;py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white&quot;
            &gt;
              {{ product.id }}
            &lt;/th&gt;
            &lt;td class=&quot;py-4 px-6&quot;&gt;{{ product.name }}&lt;/td&gt;
            &lt;td class=&quot;py-4 px-6 max-w-xs break-words&quot;&gt;
              {{ product.description }}
            &lt;/td&gt;
            &lt;td class=&quot;py-4 px-6&quot;&gt;{{ product.price }} $&lt;/td&gt;
            &lt;td class=&quot;py-4 px-6&quot;&gt;
              &lt;IconC
                iconName=&quot;Pencil&quot;
                iconClass=&quot;w-5 h-5 text-blue-700 cursor-pointer hover:text-blue-500 rounded-full&quot;
              /&gt;
            &lt;/td&gt;
            &lt;td class=&quot;py-4 px-6&quot;&gt;
              &lt;button data-modal-toggle=&quot;delete-modal&quot;&gt;
                Delete
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/template&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>Modal code (outside the for loop / table)</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;delete-modal&quot; tabindex=&quot;-1&quot; class=&quot;hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full&quot;&gt;
      &lt;div class=&quot;relative p-4 w-full max-w-md h-full md:h-auto&quot;&gt;
          &lt;div class=&quot;relative bg-white rounded-lg shadow dark:bg-gray-700&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white&quot; data-modal-toggle=&quot;delete-modal&quot;&gt;
                  &lt;svg aria-hidden=&quot;true&quot; class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 20 20&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;Close modal&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class=&quot;p-6 text-center&quot;&gt;
                  &lt;svg aria-hidden=&quot;true&quot; class=&quot;mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
                  &lt;h3 class=&quot;mb-5 text-lg font-normal text-gray-500 dark:text-gray-400&quot;&gt;Are you sure you want to delete this product?&lt;/h3&gt;
                  &lt;button data-modal-toggle=&quot;delete-modal&quot; type=&quot;button&quot; class=&quot;text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2&quot;&gt;
                      Yes, I'm sure
                  &lt;/button&gt;
                  &lt;button data-modal-toggle=&quot;delete-modal&quot; type=&quot;button&quot; class=&quot;text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600&quot;&gt;No, cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>