How to use onclick function to change ejs variable

Question

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.

Answer 1

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.