[FIXED] How do I make multiple MDB modals on the same page and have different content in each modal pop up?

Issue

How do I make multiple MDB modals on the same page and have different content in each modal pop up? Currently the content in the modal-body of the last modal will show up when either of the modals are clicked even though I have separate content in each modal-body? I used the MDB modal markup from here: https://mdbootstrap.com/docs/jquery/modals/generator/ Why is this?

Here is the my code:

    <!-- Modal 1 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 1
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 1</h4>
          </div>
          <div class="modal-body">
            Content 1
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 1 -->
    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->

Solution

#basicModal id is used in both modals. This value should be unique.

You need to change this value in the second modal code, for example:

    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="secondModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #secondModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="secondModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->

Answered By - idzark

Answer Checked By - Cary Denson (PHPFixing Admin)