How to access variable values from jstl foreach to jQuery

Question

Hello guys this may be easy question but I m finding it quite tricky. Scenario is I m printing all the values from the database table using jstl foreach.

<c:forEach items="${pal}" var="p">
    <tr>
        <td><c:out value="${p.pid}"></c:out></td>
        <td><c:out value="${p.pname}"></c:out></td>
        <td><c:out value="${p.pdesc}"></c:out></td>
        <td><c:out value="${p.pestd}"></c:out></td>
        <td><a id="popa" href="#">Allocate</a></td>
    </tr>
</c:forEach>

And now onclick Allocate button I want that particular pid (ie suppose there are 1,2,3,...,10 pid so when I click on 4th I should get the 4th pid as a value) in jquery.

But in jQuery when I try to get that value I always got last value in the loop whichever button I click.

In jQuery Section

 $("a#popa").click(function(){

     var input = $("<c:out value='${pid}' />");
     alert(input);

 });

and I also tried this

 <c:forEach var='lang' items='${paramValues.pid}'>
     <label><font color='#00CC00'><c:out value='${lang}'/></font></label>
 </c:forEach>

 but nothing works

Please Help me and guide me how to get the current value of pid on click in jQuery.

Answer 1

The value of each id attribute should be unique across the entire DOM. You're using id="popa" in a loop, this means that there will be more than one. When you try to select the id with jQuery it gives you the last one.

I would consider using the following approach. Instead of using an id , use a data-* attribute.

<c:forEach items="${pal}" var="p">
    <tr>
    <td><c:out value="${p.pid}"></c:out></td>
    <td><c:out value="${p.pname}"></c:out></td>
    <td><c:out value="${p.pdesc}"></c:out></td>
    <td><c:out value="${p.pestd}"></c:out></td>
    <td><a data-pid="${p.pid}" href="#">Allocate</a></td>
    </tr>
</c:forEach>

Then you can wire up the click event with something like this.

$("[data-pid]").click(function(){
  var pid = $(this).data("pid");
  alert(pid);
});