如何为ejs模板中的for循环内的每个html元素创建唯一的ID？

Question

$(document).ready(function() {
  $('#hiddentext').hide();

  $("#show").click(function() {
    $('#currenttext').hide();
    $('#hiddentext').show();
  });
});

<% for (var ans of quest.answers) { %>
  <div id="currenttext"><%= ans.text %></div>
  <div id="hiddentext"><%= ans.description %></div>
  <a id="show" class="btn btn-sm btn-primary">show</a>
<% } %>

I have multiple show button along with its associated HTML element inside my for loop. I am having a problem in creating unique id s for each HTML element. As for now, on clicking any of the show buttons the functionality is applied on all of the other HTML elements rather than being applied only on its associated elements. Also I have an unique _id attribute of ans ie ans._id but I don't know to make use of it to create a unique id for my HTML tag from that and how to use that unique id inside my jQuery function.

Answer 1

No need for IDs

$(document).ready(function() {
  $('.hiddentext').hide(); // can be done in CSS
  $(".show").click(function() {
    $(this).prevAll('.currenttext').hide();
    $(this).prevAll('.hiddentext').show();
    // or $(this).siblings().toggle() as suggested in other post
  });
});

<% for (var ans of quest.answers) { %>
  <div>
    <div class="currenttext"> <%= ans.text %> </div>
    <div class="hiddentext"> <%= ans.description %> </div>
    <a class="show" class="show btn btn-sm btn-primary">show</a>
  </div>
<% } %>

Answer 2

Hide the hidden ones with css so they are immediately hidden on page load.

Wrap each group in a container and uses classes and traverses

 $('.show').click(function() { $(this).siblings().toggle(); }) 

 .hiddentext { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class="currenttext">Answer #1</div> <div class="hiddentext">Descrip #1</div> <a class="show btn btn-sm btn-primary">Show</a> </div> <div> <div class="currenttext">Answer #2</div> <div class="hiddentext">Descrip #2</div> <a class="show btn btn-sm btn-primary">Show</a> </div> <div> <div class="currenttext">Answer #3</div> <div class="hiddentext">Descrip #3</div> <a class="show btn btn-sm btn-primary">Show</a> </div>