Wagtail CMS StreamField collapsing block with Bootstrap accordion

accordion_block.html

{% load wagtailcore_tags %}

<div id="accordion-{{ forloop.counter }}" role="tablist" aria-multiselectable="false" class="card-collapse">
{% for block in self %}
  <div class="card card-plain">
    <div class="card-header" role="tab" id="heading-{{ forloop.counter }}">
      <a data-toggle="collapse" data-parent="#accordion-{{ forloop.parentloop.counter }}" href="#collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
        {% include_block block.value.question %}
        <i class="fa fa-chevron-down"></i>
      </a>
    </div>
    <div id="collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}" class="collapse" role="tabpanel" aria-labelledby="heading-{{ forloop.counter }}">
      <div class="card-body">{% include_block block.value.answer %}</div>
    </div>
  </div>
{% endfor %}
</div>

blocks.py

class AccordionStreamBlock(StreamBlock):
    """
    Accordion for FAQs
    """
    required = True
    position = blocks.StructBlock([
        ('question', blocks.CharBlock(
            label='Question',
        )),
        ('answer', blocks.RichTextBlock(
            label='Answer',
            features=['bold', 'italic', 'link', 'ul'],
        )),
    ])

    class Meta:
        icon = 'folder-open-1'
        template = 'blocks/accordion_block.html'
        label = 'Accordion'