Q: loop with id's ejs and javascript I have this:
<thead class="thead-light">
                  <tr>
                    <th>Date (YYYY/MM/DD)</th>
                    <th>Exercise</th>
                    <th>WEIGHT</th>
                    <th>REPS</th>
                    <th>DURATION</th>
                    <th id="showclientusername">CLIENT USERNAME</th>
                    <th>Actions</th>

                  </tr>
                </thead>
                <tbody>
                    <% if (data.length) {
                        for(var i = 0; i < data.length; i++) { %>
                              <% if (data.length <=4) { %>
                                <style>
                                  #vact {
                                    height: 200px;
                                  }
                                </style>
                             <% } %>
                  <tr>
                    <td><%=data[i].DATE%></td>
                    <td><%=data[i].EXCERCISE%></td>
                    <td><%=data[i].WEIGHT%></td>
                    <td><%=data[i].REPS%></td>
                    <td><%=data[i].DURATION%></td>
                    <td id="isusername"><%=data[i].USERNAME%></td>
                        <script>
                        if ('<%= clientUsername %>' == '<%= trainerUsername %>') {
                            $('#isusername').css("visibility", "visible");
                             console.log("it is equal!")
                        } else {
                            $('#isusername').css("display", "none")
                            $('#showclientusername').css("display", "none")
                            console.log("false")
                        }
                        </script>

and what happens is, when I hit the specific page, <%= clientUsername %> and <%= trainerUsername %> are not equal, which is good, that is right, and it logs false. However, and I think this is because I am overriding an id, the first time it iterates through the loop (the first row in the table), it hides everything  like its supposed to, and does: $('#isusername').css("display", "none") perfect. but then it runs through the loop a second, third, fourth, etc time, and is actually displays those values instead. SO the first one is always hidden, but everytime after that it is not hidden.
I think it has something to do with the fact that I am overwriting <td id="isusername", because i am in a loop, but am not sure how to fix it. thanks for the help in advance

A: This might work. I don't know where clientUsername and trainerUsername are coming from, but I assume you pass them in the object as part of the render function. In that case, there's really no need to write a <script> tag to the HTML - you can just set the CSS display properties directly in the markup based on the client/trainer comparison.
<thead class="thead-light">
  <tr>
    <th>Date (YYYY/MM/DD)</th>
    <th>Exercise</th>
    <th>WEIGHT</th>
    <th>REPS</th>
    <th>DURATION</th>
    <th
      style="display: <%= clientUsername == trainerUsername ? 'table-cell' : 'none' %>"
    >
      CLIENT USERNAME
    </th>
    <th>Actions</th>
  </tr>
</thead>
<tbody>
  <% if (data.length) { if (data.length < 5) { %>
  <style>
    #vact {
      height: 200px;
    }
  </style>
  <% } for(var i = 0; i < data.length; i++) { %>
  <tr>
    <td><%=data[i].DATE%></td>
    <td><%=data[i].EXCERCISE%></td>
    <td><%=data[i].WEIGHT%></td>
    <td><%=data[i].REPS%></td>
    <td><%=data[i].DURATION%></td>
    <td
      style="display: <%= clientUsername == trainerUsername ? 'table-cell' : 'none' %>"
    >
      <%=data[i].USERNAME%>
    </td>
  </tr>
  <% } } %>
</tbody>


A: I was able to figure this out by including <%= i %> in each of the id's isusername.
like so:
<td id="isusername<%= i %>"><%=data[i].USERNAME%></td>
                        <script>
                        if ('<%= clientUsername %>' == '<%= trainerUsername %>') {
                            $('#isusername<%= i %>').css("visibility", "visible");
                             console.log("it is equal!")
                        } else {
                            $('#isusername<%= i %>').css("display", "none")
                            $('#showclientusername').css("display", "none")
                            console.log("false")
                        }
                        </script>

