title: Creating Bootstrap Accordion within a foreach loop
body: <p>I'm trying to create a dynamic note field where each conversation in inclosed within a separate accordion and am having a bit of trouble.</p>
  
  <p>I went ahead and copied the base code from bootstrap and noticed that the way they call the different things that need to happen. So I tried to add my unique id for each item <code>{{ $cover_design_note-&gt;id }}</code> at the end of each id to try and make it work...but that didn't seem to work. It actually seemed to break it a little more. </p>
  
  <p>Any help would be wonderful, I've been struggling with this for a while.</p>
  
  <p>My code looks like this</p>
  
  <pre><code>@foreach($cover_design-&gt;notes as $cover_design_note)
      &lt;div class="noteAcc"&gt;
        &lt;div class="accordion" id="accordion{{ $cover_design_note-&gt;id }}"&gt;
          &lt;div class="accordion-group"&gt;
            &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" data-toggle="collapse{{ $cover_design_note-&gt;id }}" data-parent="#accordion{{ $cover_design_note-&gt;id }}" href="#collapse{{ $cover_design_note-&gt;id }}"&gt;Collapsible Group Item #1&lt;/a&gt;
            &lt;/div&gt;&lt;!--.accordion-heading--&gt;
            &lt;div id="collapse{{ $cover_design_note-&gt;id }}" class="accordion-body collapse in"&gt;
            &lt;div class="accordion-inner"&gt;
                                Anim pariatur cliche...
            &lt;/div&gt;&lt;!--.accordion-inner--&gt;
          &lt;/div&gt;&lt;!--.accordion-body--&gt;
        &lt;/div&gt;&lt;!--.accordion-group--&gt;
       &lt;/div&gt;&lt;!--.accordion--&gt;
     &lt;/div&gt;&lt;!--.noteAcc--&gt;               
  @endforeach
  </code></pre>