Modal window not working properly in a for cycle heex

Phoenix Forum Chat / Discussions
,
1

Hello,

Working with phx 1.6 in heex I have a cycle inside a table:

<table>
  <thead>
    <tr>
      <th>
        Something
      </th>
      <th>
         modals
      </th>
    <tr>
  </thead>
  <tbody>
<%= for user <- @users do %>
 <!-- some tr -->
  <td>
    Open Modal
  </td>
 
    <div id="myModal" class="hidden modal">
     <!-- Modal things -->
    </div>
</tbody>

image

Now, the problem is not with the modal itself. Clicking on Open Modal for first row, eg index 0, the modal opens, but clicking on the second Open Modal generated by the for cycle <%= for user <- @users do %> exactly nothing happens… Why? It seems as the js for the modal only works for index 0…
The modal must stay in the for cycle because I have a form inside it using user variables. Just to say - I have removed all tailwind classes for simplify

Ideas?

2

Makre sure your modals have unique ids. Using an id more than a single time is invalid in html.

2 Likes