title: Pass a value to bootstrap modal from a bootstrap table
body: <p>i am setting up a flask application (just started on flask this week, i am also inexperienced in html/javascript so don't shoot at me) and want to be able to delete data from database, but want to be able to have a modal showing up asking for the confirmation (because i think it looks nice and neat).</p>
  
  <p>I have been trying for the past two days to make that modal confirmation work and haven't been able to achieve that. I have looked into similar question posted here already and wasn't able to make it work. So my attempt is a combination of what i found in those posts so far. </p>
  
  <p>My table which is created using jinja(i think) looks like below and when a user clicks on the delete button, i want to show the confirmations modal and to be able to pass to the modal at least the "issuer.Id" value. </p>
  
  <p>Would you be able to shed some light on what i do wrong or any advice how to approach it or any other idea to resolve this?
  <a href="https://i.stack.imgur.com/yaOgj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yaOgj.jpg" alt="enter image description here"></a></p>
  
  <p>My code is here:</p>
  
  <pre><code>{% extends 'layout.html' %}
  {%  block body %}
  
      &lt;h2&gt;Issuer Mappings&lt;/h2&gt;
      &lt;a class="btn btn-success" href="add-issuer-mapping"&gt;Add mapping&lt;/a&gt;
      &lt;hr&gt;
      &lt;input type="text" class="form-control" id="allocationCodeInput" onkeyup="myFunction()" placeholder="Search for allocation codes.." title="Type in a allocation code"&gt;
      &lt;hr&gt;
      &lt;table class="table table-striped table-sm ", id="IssuerMappingTable"&gt;
          &lt;tr&gt;
              &lt;th&gt;Allocation Code&lt;/th&gt;
              &lt;th&gt;Issuer&lt;/th&gt;
              &lt;th&gt;Backing&lt;/th&gt;
              &lt;th&gt;Country&lt;/th&gt;
              &lt;th&gt;Region&lt;/th&gt;
              &lt;th&gt;Sector&lt;/th&gt;
              &lt;th width="150"&gt;Asset Class (Adj)&lt;/th&gt;
              &lt;th&gt;PM (Adj)&lt;/th&gt;
              &lt;th&gt;PM Initials&lt;/th&gt;
              &lt;th&gt;Strategy (Adj)&lt;/th&gt;
              &lt;th&gt;OffPiste&lt;/th&gt;
              &lt;th&gt;Liquidity&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          {% for issuer in issuer_mappings %}
              &lt;tr&gt;
                  &lt;td&gt;&lt;a href="issuer-mappings/{{issuer.Id}}"&gt;{{issuer.AllocationCode}}&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;{{ issuer.Issuer }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.Backing }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.Country }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.Region }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.Sector }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.AssetClass_ADJ }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.PM_ADJ }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.PM_Initials }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.Strategy_ADJ }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.OffPiste }}&lt;/td&gt;
                  &lt;td&gt;{{ issuer.Liquidity }}&lt;/td&gt;
                  &lt;td&gt;&lt;a href="issuer-mappings/edit-issuer-mapping/{{ issuer.Id }}" class="btn btn-warning btn-sm pull-right"&gt;Edit&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;a class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#IssuerMappingDeleteModal" data-id="{{ issuer.Id }}"&gt;Delete&lt;/a&gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
          {% endfor %}
      &lt;/table&gt;
      &lt;div id="IssuerMappingDeleteModal" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h3 class="modal-title"&gt;Delete Issuer Mapping?&lt;/h3&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body" id="issMapId"&gt;
                      &lt;!-- display some how the id here--&gt;
                      &lt;p&gt;The selected issuer mapping is about to be deleted.&lt;br&gt;Do you want to proceed?&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;form method="POST"&gt; &lt;!-- to add the delete action later --&gt;
                          &lt;input type="hidden" name="_method" value="DELETE"&gt;
                          &lt;input type="submit" value="Yes" class="btn btn-danger" &gt;
                      &lt;/form&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          $(document).on("click", ".btn-danger", function () {
               var issuerMappingId = $(this).data('id');
               $(this).find('#issMapId').html($('&lt;b&gt; Issuer Mapping id: ' + issuerMappingId  + '&lt;/b&gt;'))
          });
      &lt;/script&gt;
  {% endblock %}
  </code></pre>