foreach item only displaying for one row - asp.net-mvc

Question

I have a jquery accordion in mvc view. It works fine for one row but will not display foreach row in the table. can't see why as it is contained within the foreach statement.
#Scripts.Render#if ("~/jquery")
#StylesModel.Render("~/Content/css"Isproject)
<link{ href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
$("#accordion").accordion({
<div class="table">
<div>collapsible: true </div>
});<div>
});
</script>
#if (Model.Isproject)
{
<div class="table">
<div>
</div>
<div>
<table class="name" style="border-spacing: 0 8px; border-collapse: separate;">
#foreach (var item in Model.project)
{
#:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">
<td class="position">
#item["post"]
</td>
<td class="image">
<img src="#item["image"]" style="height: 37px; width: 37px"/>
</td>
<td style="width: 50%;padding-left: 10px;text-align: left;">
<div id="accordion">
#item["name"]
<p>Content in dropdown</p>
</div>
</td>
<td style="width: 10%; text-align: center">
#item["rate"]
</td>
#:</tr>
}
</table>
</div>
</div>
}​
So in brief I need the jquery working for each entry/row and not just the first entry/row.

Answer 1

so when you do this $("#accordion").accordion, it will pick the first element with the id accordion and inject accordion properties and markup to it, rest will be ignored.
And, in your foreach loop, you are assigning same id to each of the div inside that particular td i.e. <div id="accordion">, which is wrong.
try assigning a unique id or instead of id use class i.e. <div class="myaccordion"> and in your jQuery code above do this, $(".myaccordion").accordion
and also the correct syntax to initialize the accordion will be:
$( ".accordion" ).accordion({
collapsible: true
});
and not what you have right now(I will consider that as typo). Also correct way of doing multiple sections inside your accordion is this:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p> this is section 1</p>
</div>
<h3>Section 2</h3>
<div>
<p>this is section 2</p>
</div>
<h3>Section 3</h3>
<div>
<p>this is section 3</p>
</div>
</div>
so basically, you need to reconstruct your foreach loop, keeping the main accordion div outside and repeating the sections only