java - 一意の ID で forEach ループを 2 回使用する必要があります

Question

リストをループして、リスト内の各項目を表示しています。

各項目には順番にリストを含めることができ、それらを再度ループして表示する必要があります。以下は私が使用しているコードです、

<c:forEach var="i" items="${someThing.uList}">
    <tr>
        <td><input type="radio" name="thelist" value="${i.id}"/>${i.number}</td>
        <td>${i.name}</td>
        <td>${i.class}</td>
        <td>${i.date}</td>
        <c:if test="${not empty i.childs}">
        <td><input type="button" value="+" id="link" onclick="showChilds('child');"/></td>
        </c:if>
    </tr>
    <c:if test="${not empty i.childLoads}">
        <tr id="child">
        <c:forEach var="c" items="${i.childLoads}">
            <td><input type="checkbox" name="thelists" value="${c.id}"/>${c.number}</td>
            <td>${i.name}</td>
            <td>${i.class}</td>
            <td>${i.date}</td>
        </c:forEach>
        </tr>
    </c:if>
</c:forEach>

ページが読み込まれると、id を子として指定して 2 番目のループを非表示にしたいのですが、最初の子だけが非表示になり、他のすべてがまだ表示されています。すべての子を非表示にする方法は? 一意の ID を作成できますが、それを JavaScript に渡して、ユーザーのクリック イベントに応じて非表示または表示するにはどうすればよいですか?