how to loop the dynamic row in a table using jquery

Respected Sir/Madam,

Actually my application is to place the data in a dash board using the forEach loop in jsp dynamically which contains lots of data so iam showing only one row and hiding the remaining ones and placing a button for each row so that if we click the button it has to show the hidden rows for that particular row but it is displaying all the rows please help me how to slow this iam attaching my code here thanks in advance.

<c:forEach items="${fvaData}" var="fva">
<tr>
<td >
<input size="30" value="<c:out value="${fva.conIdNumber}"/>"/>

</td>

<td >
<input size="30" value="<c:out value="${fva.flightDate}"/>"/>
</td>


<td >
<input size="30" value="<c:out value="${fva.consigneeCityAirportName}"/>"/>
</td>

<td >

<td align="center" >
<input type="button" id="Button" value="Populate" name="FTR" onclick="show()";/></td>

</tr>
<tbody class="hiddenDiv">
<tr><td>Consignment Number</td><td><input size="40" value="<c:out value="${fva.conIdNumber}"/>"/></td>
<td>Airway Bill</td><td><input size="40" value="<c:out value="${fva.a开发者_运维问答irWayBill}"/>"/></td>
</tr>
<tr>
<td>Flight Number</td><td> <input size="40" value="<c:out value="${fva.fightNumber}"/>"/></td>
<td>Carrier Code</td><td><input size="40" value="<c:out value="${fva.answerCarrierCode}"/>"/></td>
</tr>




</table>
</c:forEach>


and my script is as follows
function show()
{

       $(".hiddenDiv").each(function (i) {
         if ($(this).is(":hidden")) {
          $(this).slideDown("fast");
         } else {
          $(this).hide();
         }
       });



}

---

Provide the button as argument to the function:

onclick="show(this)"

So it's easy to traverse and find the objects you need:

function show(btn)
{
  var btn=$(btn);
  var tbl=btn.parents('table');
  var row=btn.parents('tbody');
  var next=row.next();

    $('tbody.hiddenDiv',tbl).hide();
    next.slideDown('fast');

}

Test the fiddle: http://www.jsfiddle.net/doktormolle/nSaWn/