title: Modal window in Jinja2 template. Flask
body: <p>Currently I am working on history page for web-application. App (written on Flask) saves history in sqlite and works with db through SQLAlchemy. It looks as follow:</p>
  
  <p><a href="https://i.stack.imgur.com/0D8JC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0D8JC.png" alt="enter image description here"></a></p>
  
  <p>As you can see in latest cell there are a lot of text data.</p>
  
  <p>More to the point, I want to list this data on history page. For now my code looks like this:</p>
  
  <pre><code>{% extends "_base.html" %}
  
  {% block content %}
  
  &lt;div id="div1" class="col-md-3"&gt;
      &lt;p&gt;&lt;a href='/' class='btn btn-primary btn-block' role='button'&gt;&lt;span class='glyphicon glyphicon-chevron-left'&gt;&lt;/span&gt; Back&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="bs-example col-md-12"&gt;
      &lt;br&gt;
      &lt;table class="table table-hover"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Task ID&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Host&lt;/th&gt;
                  &lt;th&gt;User&lt;/th&gt;
                  &lt;th&gt;Playbook&lt;/th&gt;
                  &lt;th&gt;Log&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          {% for history in histories %}
              &lt;tr&gt;
                  &lt;td&gt;{{ history.task_id }}&lt;/td&gt;
                  &lt;td&gt;{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC&lt;/td&gt;
                  &lt;td&gt;{{ history.hostname }}&lt;/td&gt;
                  &lt;td&gt;{{ history.username }}&lt;/td&gt;
                  &lt;td&gt;{{ history.playbook }}&lt;/td&gt;
                  &lt;td&gt;{{ history.output }}&lt;/td&gt;
              &lt;/tr&gt;
          {% endfor %}
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>It produces such view:</p>
  
  <p><a href="https://i.stack.imgur.com/eXHQa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eXHQa.png" alt="enter image description here"></a></p>
  
  <p>Obviously it looks ugly, so I've decided to hide this output (latest cell) via button with bootstrap module window, like this one </p>
  
  <p><a href="https://i.stack.imgur.com/dhF9U.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dhF9U.png" alt="enter image description here"></a></p>
  
  <p>And at this point I have a problem. I've created next template:</p>
  
  <pre><code>{% extends "_base.html" %}
  
  {% block content %}
  
  &lt;div id="div1" class="col-md-3"&gt;
      &lt;p&gt;&lt;a href='/' class='btn btn-primary btn-block' role='button'&gt;&lt;span class='glyphicon glyphicon-chevron-left'&gt;&lt;/span&gt; Back&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="bs-example col-md-12"&gt;
      &lt;br&gt;
      &lt;table class="table table-hover"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Task ID&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Host&lt;/th&gt;
                  &lt;th&gt;User&lt;/th&gt;
                  &lt;th&gt;Playbook&lt;/th&gt;
                  &lt;th&gt;Log&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          {% for history in histories %}
              &lt;tr&gt;
                  &lt;td&gt;{{ history.task_id }}&lt;/td&gt;
                  &lt;td&gt;{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC&lt;/td&gt;
                  &lt;td&gt;{{ history.hostname }}&lt;/td&gt;
                  &lt;td&gt;{{ history.username }}&lt;/td&gt;
                  &lt;td&gt;{{ history.playbook }}&lt;/td&gt;
                  &lt;td&gt;&lt;button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myOutput"&gt;Output&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          {% endfor %}
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
   &lt;!-- Modal --&gt;
    &lt;div class="modal fade" id="myOutput" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;p&gt;Some text in the modal.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>But I have no clue how to add correct output to body of every modal window. Do I need to generate a lot of modal windows in code with different ids like <code>&lt;div class="modal fade" id="myOutput1" role="dialog"&gt;</code>, <code>&lt;div class="modal fade" id="myOutput2" role="dialog"&gt;</code>and so on? Will it be correct?</p>