modalProblem

disappearing modal on card re-render

by Ernesto1

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- *** Main Content Container *** -->
  <div id="mainBackgroundContainer">
    <div class="container-fluid" id="mainContentContainer">
        
      <!-- *** Search Bar *** -->
      <div class="row" id="searchContainer">
          <div class="col-lg-12">
              <form id="form-id">
                  <div class="mb-3 d-flex justify-content-center" style="margin-top: 2vh;">
                      <select id="selPosterCat" class="form-select-sm w-25" aria-label="Default select example" style="border-right: none; border-width: 1px; height: 2rem;">
                        <option value="all" selected>Select Category</option>
                        <option value="all">All Categories</option>
                            <!-- other options added here by javaScript -->
                      </select>
                      <input type="text" class="form-control-sm w-50" id="inlineFormInput" style="border-left: none; border-radius: 0; border-width: 1px; height: 2rem;" value="" placeholder="Search Posters">
                      <button type="text" id="btn" class="btn btn-primary mb-2 btn-sm" style="height: 2rem;border-top-left-radius: 0!important; border-bottom-left-radius: 0!important;
                      ">Search</button>
                      <!-- <div class="results">
                        <ul>
                          <li>some</li>
                          <li>some</li>
                          <li>some</li>
                          <li>some</li>
                        </ul>
                      </div> -->
                  </div>
              </form>
          </div>
      </div>
    
      <div class="row row-cols-1 row-cols-lg-5 row-cols-sm-2 g-4"...

JavaScript

const setPosters = [
    { id: '1', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Sam Smith', category: 'treatments' },
    { id: '2', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
    { id: '3', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
    { id: '4', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Bob Burke', category: 'illness' },
    { id: '5', img: 'libs/images/pdfFile.jpg', title: 'Pain Treatments', author: 'James Frank', category: 'cures' },
    { id: '6', img: 'libs/images/pdfFile.jpg', title: 'Sinus Treatments', author: 'Ted Reed', category: 'illness' },
    { id: '7', img: 'libs/images/pdfFile.jpg', title: 'Migrain Treatments', author: 'Ted Reed', category: 'remedy' },
    { id: '8', img: 'libs/images/pdfFile.jpg', title: 'Flu Treatments', author: 'Ted Reed', category: 'remedy' },
    { id: '9', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'James Frank', category: 'remedy' },
    { id: '10', img: 'libs/images/pdfFile.jpg', title: 'Flu Treatments', author: 'Ralph Barnes ', category: 'remedy' },
    { id: '11', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Thomas Smith', category: 'cures' },
    { id: '12', img: 'libs/images/pdfFile.jpg', title: 'Pain Treatments', author: 'Ralph Barnes', category: 'remedy' },
    { id: '13', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Sam Smith', category: 'treatments' },
    { id: '14', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
    { id: '15', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
    { id: '16', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Bob Burke', category: 'illness' },
    { id: '17', img: 'libs/images/pdfFile.jpg', title: 'Pain Treatments', author: 'James Frank', category: 'cures' },
    {...