How do I stop my Jinja loop from creating duplicates?

Question

I have data which has been scraped from a website and is in two seperate lists. I am looping over the lists with Jinja to output into html as <h2> and <p>. (see code example) Example 1: This is my python code, using Flask to serve my page.

@app.route('/campervans')
def campers():
    van_headings = [title.getText() for title in title]
    contents = [content.getText().strip() for content in content]
    titles = [van_headings[i] for i in range(0, len(van_headings))]
    data = [contents[i] for i in range(0, len(contents))]
    return render_template('campers.html',
                           titles=titles, data=data,
                           )

html and Jinja code:

  <br/>

    <div class="row featurette">
      <div class="col-md-7"><br/>

          {% for title in titles %}
          {%for x in data%}
        <h2 class="featurette-heading fw-normal lh-1">{{title}}</h2>
          <p class="lead">{{x}}</p>
            {% endfor %}
            {%endfor%}

Instead of being rendered as : Title 1 Data 1 Title 2 Data 2 etc... It is coming out with : Title 1 data1 Title 1 Data 2 Title 2 data 1 Title 2 Data 2 etc...

I have tried moving the jinja loops around

 <div class="row featurette">
      <div class="col-md-7"><br/>

          {% for title in titles %}
        <h2 class="featurette-heading fw-normal lh-1">{{title}}</h2>
          {%endfor%}
          {%for x in data%}
          <p class="lead">{{x}}</p>
            {% endfor %}

This groups all the titles together and then displays all the data. It is not repeated in this configuration but it is not in the format I desire

Answer 1

You can loop over one of the lists, and use the index of the first loop to get a specific element from the second list.

{% for title in titles %}
    <h2 class="featurette-heading fw-normal lh-1">{{title}}</h2>
    <p class="lead">{{data[loop.index0]}}</p>
{% endfor %}

alt

    <p class="lead">{{data[loop.index -1]}}</p>

Jinja has loop.index0 which starts counting at 0, and loop.index which starts counting at 1.

Or, instead of using two lists, build one list with items containing related title and data.