I need some help in my JQuery code I can not seem to understand where I am going wrong.  It's a simple ' Parent' and ' Child' style collapsible table.  So to start with all ' children' are hidden and if you click on a Parent it shows all it's children.  The problem with my code is when I click on a Parent all of it's children are shown in all the rest of the Parents too. 

Thanks 

2. $(document).ready(function() {
4. $("#report tr:odd").addClass("odd");
5. $("#report tr:not(.odd)").hide();
6. $("#report tr:first-child").show();
8. $('location.href').click(function() {
9. $.ajax({
10. type : 'GET',
11. url : 'Test',
12. data : '${cat.categoryId}',
13. success : function(response) {
14. $('ul').html(response);
15. $("#report tr.odd").next("tr").toggle();
16. }
17. });
18. });
19. });
20. JSP
22. <c:if test="${!empty categoryList}">
23. <table id="report">
24. <tr>
25. <th>Category Name <span><button id="create-cat">Create new category</button></span></th>
26. </tr>
27. <c:forEach items="${categoryList}" var="cat">
28. <tr onclick="location.href='${cat.categoryId}'" >
29. <td>${cat.categoryName}</td>
30. <td><div class="arrow"></div></td>
31. <tr>
32. <td colspan="5">
33. <c:forEach items="${prodList}" var="prod">
34. <ul>
35. <li>${prod.productName}</li>
36. </ul>
37. </c:forEach>
38. </tr>
39. </c:forEach>
40. </table>
41. </c:if>