I’m using a Bootstrap template for a product landing page. In this page, you can click on the product image and get more info about it via a modal popup. Each modal contains information about the clicked product.

The modal works fine as per below:

        <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
          <div class="modal-dialog modal-xl">
              <div class="modal-content">
                  <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                  <div class="modal-body text-center pb-5">
                      <div class="container">
                          <div class="row justify-content-center">
                              <div class="col-lg-8">
                                  <!-- Portfolio Modal - Title-->
                                  <h5 class="portfolio-modal-title text-secondary text-uppercase mb-0">Norton Expert</h5>
                                    <h6 class="portfolio-modal-title text-secondary mb-0">Automotive 125 mm Sanding Discs</h6>
                                  <!-- Icon Divider-->
                                  <div class="divider-custom">
                                      <div class="divider-custom-line"></div>
                                      <div class="divider-custom-icon"><img src="https://digitalcomms.saint-gobain.com.au/sanding-disc-icn-8Hole.svg" style="width: 4rem;"></div>
                                      <div class="divider-custom-line"></div>
                                  </div>
                                  <!-- Portfolio Modal - Image-->
                                    <div><img class="img-fluid rounded mb-5" src="https://digitalcomms.saint-gobain.com.au/78072775738_NOR_EXP_AAM_SND_Disc_125mm_8H_P320.png" style="width: 100%;" alt="..." />
                                    <!-- Portfolio Modal - Text-->
                                    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p></div>
                                  <div class="divider-custom">
                                    <div style="display:flex;"><button class="btn btn-danger">Fast Sanding</button><button class="btn btn-danger">Panel & Paint</button></div>
                                </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

I need to let the user know about the available range of that product.

As soon as I add the table underneath the modal content, the other modals stop working (showing a dimmed screen). Also, when I duplicate the table code to the other modals (second and third) to edit with the correct info, the new table will be added under the first modal!

This is the first modal code with the table:

<!-- Portfolio Modal 1-->
        <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
          <div class="modal-dialog modal-xl">
              <div class="modal-content">
                  <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                  <div class="modal-body text-center pb-5">
                      <div class="container">
                          <div class="row justify-content-center">
                              <div class="col-lg-8">
                                  <!-- Portfolio Modal - Title-->
                                  <h5 class="portfolio-modal-title text-secondary text-uppercase mb-0">Norton Expert</h5>
                                    <h6 class="portfolio-modal-title text-secondary mb-0">Automotive 125 mm Sanding Discs</h6>
                                  <!-- Icon Divider-->
                                  <div class="divider-custom">
                                      <div class="divider-custom-line"></div>
                                      <div class="divider-custom-icon"><img src="https://digitalcomms.saint-gobain.com.au/sanding-disc-icn-8Hole.svg" style="width: 4rem;"></div>
                                      <div class="divider-custom-line"></div>
                                  </div>
                                  <!-- Portfolio Modal - Image-->
                                    <div><img class="img-fluid rounded mb-5" src="https://digitalcomms.saint-gobain.com.au/78072775738_NOR_EXP_AAM_SND_Disc_125mm_8H_P320.png" style="width: 100%;" alt="..." />
                                    <!-- Portfolio Modal - Text-->
                                    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p></div>
                                  <div class="divider-custom">
                                    <div style="display:flex;"><button class="btn btn-danger">Fast Sanding</button><button class="btn btn-danger">Panel & Paint</button></div>
                                </div>
                              </div>
                              <h4>Features & Benefits</h4>
                                      <ul class="text-sm-start text-danger"><li>For permanent mounting and repair of household
                                        fixtures and fittings</li>
                                      <li>Will adhere to a wide range of different surfaces</li>
                                      <li>No more drilling, nails, glues, screws or rivets</li>
                                      </ul>
                                      <div>
                                        <table class="table">
                                          <thead>
                                            <tr>
                                              <th>Grit</th>
                                              <th>Part Number</th>
                                            </tr>
                                            <tr class="table-primary">
                                              <td>P80</td>
                                              <td>78072775735</td>
                                            </tr>
                                            <tr class="table-success">
                                              <td>P120</td>
                                              <td>78072775736</td>
                                            </tr>
                                            </tr>
                                            <tr class="table-success">
                                              <td>P180</td>
                                              <td>78072775737</td>
                                            </tr>
                                            <tr class="table-danger">
                                              <td>P320</td>
                                              <td>78072775738</td>
                                            </tr>
                                            <tr class="table-danger">
                                              <td>P400</td>
                                              <td>78072775739</td>
                                            </tr>
                                            <tr class="table-warning">
                                              <td>P800</td>
                                              <td>78072775740</td>
                                            </tr>
                                          </thead>
                                          <tbody>
                                            <div class="divider-custom">
                                              <div></div>
                                          </div>
                                            <h4>Available Range</h4>
                                      </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

When I remove the table from the first modal, everything goes back to normal and all the modals work without problem.

Please let me know what is wrong in the code and how can I add the table without causing any problems to the other modals and also, how can I copy the table to the other modals.

This is the original code from the template:

<!-- Portfolio Modal 1-->
        <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                    <div class="modal-body text-center pb-5">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <!-- Portfolio Modal - Title-->
                                    <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Farecla Classic</h2>
                                    <!-- Icon Divider-->
                                    <div class="divider-custom">
                                        <div class="divider-custom-line"></div>
                                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                        <div class="divider-custom-line"></div>
                                    </div>
                                    <!-- Portfolio Modal - Image-->
                                    <img class="img-fluid rounded mb-5" src="assets/img/portfolio/FAR-Classic.jpg" alt="..." />
                                    <!-- Portfolio Modal - Text-->
                                    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
                                    <a class="btn btn-primary" href="" target="_blank">
                                        <i class="fa-solid fa-arrow-up-right-from-square fa-fw"></i>
                                        OPEN
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I do appreciate everyone’s help in advance

Cheers,

Iman