I am creating a web application using Node, Express and ejs. On the same page, I generate a set of buttons (first table below) and a set of corresponding hidden divs (second table below). When a button is clicked I want to display the corresponding div.
<% for(var i = 0; i < stream.length; i++){ %>
<tr>
<th scope="row"><%= stream[i].streamid %></th>
<td><%= stream[i].streamname %></td>
<td><%= stream[i].streamername %></td>
<td>
<button
class="btn btn-outline-success"
data-toggle="modal"
data-target="#streamDetailsModal"
id="detailsstream"
onclick="<% ctr = i %>"
>
Details
</button>
</td>
<td>
<a
class="btn btn-outline-danger"
href="/stream/delete/<%= stream[i].streamid %>"
>
⊖ Remove
</a>
</td>
</tr>
<% } %>
<% for(var i = 0; i < stream.length; i++){ %>
<tr>
<th scope="row"><%= stream[i].streamid %></th>
<td><%= stream[i].streamname %></td>
<td><%= stream[i].streamername %></td>
<td>
<button
class="btn btn-outline-success"
data-toggle="modal"
data-target="#streamDetailsModal"
id="detailsstream"
data-ctr="<%= i %>"
>
Details
</button>
</td>
<td>
<a
class="btn btn-outline-danger"
href="/stream/delete/<%= stream[i].streamid %>"
>
⊖ Remove
</a>
</td>
</tr>
<% } %>
I need the counter in first loop to change while the user clicks on the details button from the second loop.
If you do wish to go with the above logic... the possible way will be to make a server call on the button click, compute the value on the server and the re render the page on the front end. Browser Javascript cannot change or manipulate the ejs logic or variable. That is done on the node server.
The normal way to implement such functionality is to do something like this instead:
in your first loop generating buttons, add each button a handler that shows the div with some unique id (like streamDetailsModal12 for button 12); if you use bootstrap or something similar, you don't even have to implement the handler
<button
class="btn btn-outline-success"
data-toggle="modal"
data-target="#streamDetailsModal<% i %>"
id="detailsstream"
onclick="handler(event)"
>
and to each div you'd like to show on button click you add corresponding ids:
<div id="streamDetailsModal<% i %>"
> some content </div>
If you implement handler yourself, you have to grab the id from event.target (which is your button holding data-target attribute with the id you want) and then find the element and toggle it's display property or something else you'd like to control visibility.