title: Loop to display all information in html cards
body: <p>I am trying to make a flask website which will display a specific amount of information based on results.
  I have managed to get the data from the database and I know how to display it on 1 html card, but I cant find a way to display all information based on the length of the array I am passing.
  this is the result so far [website][1]
  [1]: https://i.stack.imgur.com/ycqwt.png</p>
  <pre><code>{% extends &quot;base.html&quot; %}
  {% block title %} Search {% endblock %}
  {% block style %}{% endblock %}
  {% block body %}
  
  &lt;h1 align=&quot;center&quot;&gt;Resluts&lt;/h1&gt;
  &lt;div class=&quot;card&quot; id = &quot;element1&quot;&gt;
  &lt;img src={{url_for('static', filename='pictures/uni.jpg')}} alt=&quot;Avatar&quot; style=&quot;width:20%&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;h4&gt;&lt;b&gt;Name: {{ name }}&lt;/b&gt;&lt;/h4&gt;
  &lt;p&gt;Country: {{ country }}&lt;/p&gt;
  &lt;p&gt;Major: {{ major }}&lt;/p&gt;
  &lt;p&gt;Slect and visit: {{ link }}&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div class=&quot;card&quot;&gt;
  &lt;img src={{url_for('static', filename='pictures/uni.jpg')}} alt=&quot;Avatar&quot; style=&quot;width:20%&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;h4&gt;&lt;b&gt;Name: {{ name }}&lt;/b&gt;&lt;/h4&gt;
  &lt;p&gt;Country: {{ country }}&lt;/p&gt;
  &lt;p&gt;Major: {{ major }}&lt;/p&gt;
  &lt;p&gt;Slect and visit: {{ link }}&lt;/p&gt;
  
  &lt;/div&gt;
  
  
  &lt;p&gt;Here is my variable: {{ text1 }}&lt;/p&gt;
  
  
  {% endblock %}
  </code></pre>
  <p>what I have also tried</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;card&quot; id = &quot;div1&quot;&gt;
  &lt;img src={{url_for('static', filename='pictures/uni.jpg')}} alt=&quot;Avatar&quot; style=&quot;width:20%&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;h4&gt;&lt;b&gt;Name: {{ name }}&lt;/b&gt;&lt;/h4&gt;
  &lt;p&gt;Country: {{ country }}&lt;/p&gt;
  &lt;p&gt;Major: {{ major }}&lt;/p&gt;
  &lt;p&gt;Slect and visit: {{ link }}&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;button onclick=&quot;body()&quot;&gt;Try it&lt;/button&gt;
  &lt;script&gt;
  var body = document.getElementsByTagName('body')[2],
  newdiv = document.createElement('container');   
                   //add an id
  body.appendChild(newdiv);                 
  
   }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I want to pass the array of results and the length and the magic to happen from there
  this is @app.route(&quot;/search&quot;, methods=[&quot;POST&quot;, &quot;GET&quot;]) in app.py</p>
  <pre><code>        if request.method == &quot;POST&quot;:
              major = request.form[&quot;major&quot;]
              country = request.form[&quot;country&quot;]
              price = request.form[&quot;price&quot;]
              global universities
              universities = search_universities(country, major, price)
              print(universities)
              if universities != []:
                  #for x in universities:
                  #   name = x[0]
                  #   country = x[1]
                  #   major = x[2]
                  #   price = x[3]
                  #   link = x[4]
                  list_length = len(universities)
                  return render_template('result.html', text1 = universities, list_length = list_length)
              else:
                  return render_template('result.html')
          return render_template('search.html')
  </code></pre>