title: how to show modal windows dynamically and send data with Flask
body: <p>I'm trying to insert modal window html code dynamically upon user click on which item otherwise i load all of the items' modal window code in the html. I also have some inputs in the modal window loading from Flask/Sql and i want to let user update any of them so i need to send data back to python on submit button clicked. But right now because of i have too many modal windows (even though they have separate ids) i couldn't find a way to achieve this</p>
  
  <p>Here is my code:</p>
  
  <p><strong>routes.py</strong></p>
  
  <pre><code>@app.route('/viewApart', methods=['GET', 'POST'])
  def viewApart():
    apts = []
    getApts = db.engine.execute("SELECT * FROM apartments")
    for a in getApts:
        apts.append((a))
    rooms = []
    getRooms = db.engine.execute("SELECT * FROM rooms")
    for r in getRooms:
        rooms.append((r))
    return render_template('apartments.html', title=_('Apartments'), apts=apts, rooms=rooms)
  </code></pre>
  
  <p><strong>apartments.html</strong></p>
  
  <pre><code>....
  &lt;section class="container"&gt;
  &lt;div class="row"&gt;
  .. below some gallery code to show individual items from apts ..
  
  {% for apt in apts %}
      &lt;div class="col-md-3"&gt;
          &lt;a href="javascript:void(0);" class="widget__v2 apt-widget rounded-corners box-shadow__v1 white" data-anchor="modalwindow" data-target="edit-apartment{{ apt[0] }}" id="apt{{ apt[0] }}"&gt;
              &lt;div class="widget-header"&gt;
                  &lt;figure class="image h-180"&gt;
                      &lt;img src="{{url_for('static', filename='_assets/img/apt/{{ apt[0] }}.jpg')}}" alt="" class="image__scaledown"&gt;
                  &lt;/figure&gt;
  
  .. below model window ..
  
  &lt;div id="edit-apartment{{ apt[0] }}" class="modal large"&gt;
          &lt;div class="modal-wrapper"&gt;
              &lt;div class="modal-inner"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h3 class="title"&gt;{{ _('Edit Apartment') }}&lt;/h3&gt;
                      &lt;a href="javascript:void(0);" data-anchor="close-modal" class="modal-close-btn"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="row medium-gutter"&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="row medium-gutter"&gt;
                                  &lt;div class="col-md-8"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;div class="form-group-title clearfix"&gt;
                                              &lt;label for="apt_display_name"&gt;{{ _('Display Name') }}&lt;/label&gt;
                                              &lt;div class="lh-24 text__default-grey pull-right" data-tooltip="true" data-tooltip-direction="up" data-multiline="true"
                                                   data-content=".."&gt;
                                                  &lt;i class="icofont-question-circle"&gt;&lt;/i&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;input id="apt_display_name" type="text" class="form-control" value="{{ apt[1] }}"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-4"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="apt_number"&gt;{{ _('Apt. Number') }}&lt;/label&gt;
                                          &lt;input id="apt_number" type="text" class="form-control" value="{{ apt[2] }}"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  .. and so on...
  
  .. and submit button ..
  &lt;a href="javascript:void(0);"id="btnSubmit"&gt;{{ _('Save Changes') }}&lt;/a&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Right now even with multiple model windows, i can display the current data in modal window, so what i want to achieve this upon clicking on btnSubmit button i need to send all input values back to python so i can update my sql or insert new one. Please let me know if more code is needed.. </p>
  
  <p>Thanks </p>