Javascript 在JSP/JS forEach循环中只打开第一个按钮

因此，我有一个JSP页面，它附加到我需要使用JSTL循环的对象列表上。（这是一个Tiles项目，控制器正在设置一些模拟对象，这些对象被添加到列表中并作为列表返回。该位工作正常。） 基本上，我希望它在一行中显示一个名称、一个值和一个按钮，当单击按钮时，我希望其余的信息弹出

 <c:forEach var="i" varStatus="curr" items="${items}">
    <tr>
            <td>
                ${i.itemName}
            </td>
             <td>
                ${i.itemValue}
            </td>
             <td style="float:right;">
            <input type="button" id="showhide">
            </td>
     </tr>
     <tr>
        <td class="toggle">
            ${i.itemAltName}
            ${i.itemAdditions}
            ${i.itemValueAfterAdditions}
        </td>
    </tr>   
</c:forEach>

---

目前，只有第一个按钮可以正确打开相应的文本。从我看到的其他答案中，我知道我需要使ID唯一，但我不确定如何使用JSP循环实现这一点。帮助？

与另一个答案不同的方法是，使用varStatus（由Jozef Chocholacek建议）获取唯一ID

这样，无论按钮和链接的td位于何处，您都可以找到一个解决方案（它们不必是兄弟）

您的JSP:

 <c:forEach var="i" varStatus="curr" items="${items}" varStatus="loop">
    <tr>
            <td>
                ${i.itemName}
            </td>
             <td>
                ${i.itemValue}
            </td>
             <td style="float:right;">
            <input type="button" class="showhide" id="showHideButton_${loop.index}">
            </td>
     </tr>
     <tr>
        <td class="toggle" id="data_${loop.index}">
            ${i.itemAltName}
            ${i.itemAdditions}
            ${i.itemValueAfterAdditions}
        </td>
    </tr>   
</c:forEach>

${i.itemName}
${i.itemValue}
${i.itemAltName}
${i.itemAdditions}
${i.itemValueAfterAdditions}

在下面的代码段中使用JS：

var buttons=document.getElementsByClassName（'showhide'）；
对于（var i=0；i可能的副本）来说，这听起来真的很有帮助。我会试试的。谢谢！
.toggle{
display:none;
}

 <c:forEach var="i" varStatus="curr" items="${items}" varStatus="loop">
    <tr>
            <td>
                ${i.itemName}
            </td>
             <td>
                ${i.itemValue}
            </td>
             <td style="float:right;">
            <input type="button" class="showhide" id="showHideButton_${loop.index}">
            </td>
     </tr>
     <tr>
        <td class="toggle" id="data_${loop.index}">
            ${i.itemAltName}
            ${i.itemAdditions}
            ${i.itemValueAfterAdditions}
        </td>
    </tr>   
</c:forEach>