Q:

Looping Through JSON, List, List In List To Accodian Bootstrap

What It Looks Like Now(Image)
What I would like if for the episodes to append under each season. There are 7 lists in the episodes list, and 7 seasons in total, right now the whole episode list is printing into each season (can be seen in the picture provided), but I would like each list within the episode list of go under each season. Right now there are two episodes for each season so I would like there to be two episodes under each season, instead of all episodes under each season. This is done using the Bootstrap accordion. Thanks 
<div id="accordion" role="tablist">
  {% for season in tvdata[currentSeries]["seasons"] %}
    <div class="card">
      <div class="card-header" role="tab" id="heading">
        <h5 class="mb-0">
          <a data-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
            <p>Season {{ season }}</p>
          </a>
        </h5>
      </div>

      {% for season in tvdata[currentSeries]["episodes"] %}
        {% for items in season %}
          <div id="collapse" class="collapse show" role="tabpanel" aria-labelledby="heading" data-parent="#accordion">
            <div class="card-body">
                {{ items }}
            </div>
          </div>
        {% endfor %}
      {% endfor %}
    </div>
  {% endfor %}
</div>

JSON FILE:
"seasons": [1, 2, 3, 4, 5, 6, 7],
"episodes": [ ["S1-ep1","S1-ep2"],
              ["S2-ep1","S2-ep2"],
              ["S3-ep1","S3-ep2"],
              ["S4-ep1","S4-ep2"],
              ["S5-ep1","S5-ep2"],
              ["S6-ep1","S6-ep2"],
              ["S7-ep1","S7-ep2"]]

          }

ISSUE Fixed (Thanks To Below): 
          <div id="collapse" class="collapse show" role="tabpanel" aria-labelledby="heading" data-parent="#accordion">
            <div class="card-body">
              {% for seasoneps in tvdata[currentSeries]["episodes"][season-1] %}
                {% for eps in seasoneps %}
                {{ eps }}
                {% endfor %}
              {% endfor %}
            </div>
          </div>

A:

I havent used jinja - but used some knockout templating as well as looked into mustache and asp.net razor views - yours feels off to me:

You use two for-loops with the same variable seasons with the inner one overwriting the outer ones value - just guesstemating.

Please try:
<div id="accordion" role="tablist">
    {% for season in tvdata[currentSeries]["seasons"] %}
        <div class="card">
            <div class="card-header" role="tab" id="heading">
                <h5 class="mb-0">
                    <a data-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
                        <p>Season {{ season }}</p>
                    </a>
                </h5>
            </div>

            {% for items in tvdata[currentSeries]["episodes"][season-1] %} 
                <div id="collapse" class="collapse show" role="tabpanel" aria-labelledby="heading" data-parent="#accordion">
                    <div class="card-body">
                        {{ items }}
                    </div>
                </div> 
            {% endfor %}
        </div>
    {% endfor %}
</div>

I am unsure about the [season-1] - part - might be you need to use [{{season}}-1] or whatever syntax lets you select the part of the json thats specific to that season (the 2 items inner list)

