title: Multiple modals in bootstrap4 not working
body: <p>I have 2 modals that are triggered by selection of a drop down menu. If I have the "multi-part-delete modal" first and the "multi-part-move" modal second then the "multi-part-move" one does not show. The screen goes dark but the modal does not appear.</p>
  
  <p>If I swap them around then the move one works and the delete one doesn't show. Anyone know how I can get them both to work.</p>
  
  <pre><code>    &lt;!-- Multi-Part Delete Modal --&gt;
  &lt;div class="modal fade" id="multipartdeletemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalLongTitle"&gt;Delete Selected Parts?&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;i data-icon="ei-trash" data-size="l" class="trash"&gt;&lt;/i&gt;
          &lt;h5&gt;Are you sure you want to delete these parts?&lt;br&gt;
              This process cannot be undone&lt;/h5&gt;
          &lt;form action="{% url 'multi-delete' project.id %}" method="post" id="multidelete"&gt;{% csrf_token %}&lt;/form&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;button form="multidelete" type="submit" value="Submit" class="btn btn-danger"&gt;Delete&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;!-- Multi-Part Move Modal --&gt;
  &lt;div class="modal fade" id="multimovemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-dialog-centered"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalLongTitle"&gt;Move Selected Parts?&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;i data-icon="ei-trash" data-size="l" class="trash"&gt;&lt;/i&gt;
          &lt;h5&gt;Please select group?&lt;/h5&gt;
          &lt;form action="{% url 'multi-delete' project.id %}" method="post" id="multimove"&gt;{% csrf_token %}&lt;/form&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;button form="multimove" type="submit" value="Submit" class="btn btn-danger"&gt;Delete&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>