Dynamically set id for hidden fields in template file

Question

How can I dynamically set id for hidden fields in template file?? I want to display the value in the alert box later using JS.

Template file:

<table>
%for doc in docs:
<tr>
<td>
<a href = '' onclick="popup1();">Link</a>   
<input type=hidden id="**do something here**" name="hidden" value="{{doc["Field"]}}" />
</td>
</tr>
%end
</table>

JS:

function popup1()
{
alert(document.getElementById("hiddenFieldID").value);
}

Can anybody suggest me what to do in do something here ???

Answer 1

Perhaps you do not need the ID

If you do

<a href="" onclick="return popup1(this);">Link</a> 

you can have

function popup1(anchor) {
  alert(anchor.parentNode.getElementsByTagName("input")[0].value);
  return false;
}

In jQuery:

<a href="#" class="popup">Link</a> 

using

$(function() {
  $(".popup").on("click",function(e) {
    e.preventDefault();
    alert($(this).next().val());
  });
});