Creating Two Modals With the same Style

Good day all.

So I have been trying to create an additional modal for my website. The first modal is on the home page, and the second modal is on the service page. but after writing the codes, only the first one works fine, and the second modal on my service page doesn’t work well.

Here are the codes:

1. Html for modal 1 on home page

    <div class="nippy-modal-header">
      <h3 style="font-weight: bold;">More Technologies & Frameworks <span id="nippy-closeBtn" class="nippy-closeBtn">&times;</span></h3>
   
    </div>
   
    <div class="nippy-modal-body">
      <p>
        The technologies and applications that is use varies, depending on the nature of the Job.
        I can use Wix or Shopify to create the perfect E-Commerce for you.
      </p>
      <p>
        The list goes on. Javascript frameworks include: React.js, Node.js, Express.js and we keep exploring this wonderful technology.
      </p>
    </div>
   
    <div class="nippy-modal-footer">
      <a href="services.html"><button type="button" class="nippy-button">See My Services<i class="fa-solid fa-arrow-right"></i></button></a>
    </div>
   

2. HTML for modal 2 on service page:

      <div class="gModalHeader">
        <h3 style="font-weight: bold;">Graphics & Branding <span id="gModalCloseBtn" class="gModalCloseBtn">&times;</span></h3>
   
      </div>
   
      <div class="gModalBody">
        <ol>
          <li>Logos</li>
          <li>UI Interface Design and Development</li>
          <li>Flyers</li>
          <li>Branding</li>
          <li>Buisness/Complementary Cards</li>
          <li>Merchs and Mockups</li>
        </ol>
      </div>
   
      <div class="gModalFooter">
        <a href="index.html#hire-me"><button type="button" class="nippy-button">Hire Me<i class="fa-solid fa-arrow-right"></i></button></a>
      </div>
   
    </div>
   

3. Javascript for modal one:

   // Get All Elements
   const modal = document.getElementById(“nippy-modal”);
   const seeMoreBtn = document.getElementById(“nippy-modalBtn”);
   const closeBtn = document.getElementById(“nippy-closeBtn”);

   // Listen for open click
   seeMoreBtn.addEventListener(“click”, openModal);
   // Listen For Close click
   closeBtn.addEventListener(“click”, closeModal);

   // function to open modal
   function openModal() {
   modal.style.display = “block”;
   }
   // function to Close modal
   function closeModal() {
   modal.style.display = “none”;
   }

4. Javascript for modal Two:

   var gModal = document.getElementById(“gModal”);
   var gSeeMoreBtn = document.getElementById(“gModalBtn”);
   var gCloseBtn = document.getElementById(“gModalCloseBtn”);

   // Listen for open click
   gSeeMoreBtn.addEventListener(“click”, gOpenModal);
   // Listen For Close click
   gCloseBtn.addEventListener(“click”, gCloseModal);

   // function to open modal
   function gOpenModal() {
   gModal.style.display = “block”;
   }
   // function to Close modal
   function gCloseModal() {
   gModal.style.display = “none”;
   }