title: How to use Bootstrap Collapse with KnockoutJS foreach template
body: <p>I have a template for adding "items" to a store inventory page.  I need the items to be minimized to show only info like name and price, but once clicked on it will expand to additional information.  The list is using knockoutJS and I'm not sure how to go about hooking up the Twitter Bootstrap Collapse items.  The ids of the divs I'm referencing are duplicated so the links that toggles the "more info" divs only toggle the first div on the page.  Here's my code so far.  I need each link to toggle the div following it no matter how many instances of the templated mark up.</p>
  
  <pre><code>    &lt;ul data-bind="foreach: items" class="inline"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Store Item List&lt;/legend&gt;
      &lt;li class="separator"&gt;&lt;div id="item-accordian"&gt;
          &lt;div class="row"&gt;
              &lt;a id="store-item" data-toggle="collapse" data-target=".collapse" href="#store-item-details"&gt;
                  &lt;div class="span2"&gt;
                      &lt;strong&gt;Name: &lt;/strong&gt;&lt;span data-bind="text: Name"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="span2"&gt;
                      &lt;strong&gt;Price: &lt;/strong&gt;&lt;span data-bind="text: FormatUnitPrice"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="span2"&gt;
                      &lt;strong&gt;Type: &lt;/strong&gt;&lt;span data-bind="text: ItemType"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="span2"&gt;
                      &lt;strong&gt;Status: &lt;/strong&gt;&lt;span data-bind="text: Status"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="store-item-details" class="collapse"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="span1"&gt;
                      &lt;strong&gt;Description:&lt;/strong&gt;
                  &lt;/div&gt;
                  &lt;div class="span4"&gt;
                      &lt;span data-bind="text: Description"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="span8"&gt;
                      &lt;ul data-bind="foreach: ItemAttributes"&gt;
                          &lt;li class="control-group"&gt;
                              &lt;div class="controls"&gt;
                                  &lt;div class="float-left omega-spacer-10"&gt;
                                      &lt;strong data-bind="text: Name"&gt;:&lt;/strong&gt;&lt;/div&gt;
                                  &lt;div class="float-left omega-spacer-35"&gt;
                                      &lt;select class="input-medium" data-bind="options: AttributeValues, optionsText: 'Text', optionsValue: 'Value'"&gt;
                                      &lt;/select&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="span8 float-right"&gt;
                              &lt;div class="float-right"&gt;
                                  &lt;button data-bind="click: $parent.deleteItem"&gt;
                                      Delete&lt;/button&gt;&lt;/div&gt;
                              &lt;div class="float-right"&gt;
                                  &lt;button data-bind="click: $parent.editItem"&gt;
                                      Edit&lt;/button&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/fieldset&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thank you for any info you may have.</p>