页面上有两个模态窗口 - 但只显示一个

Question

I'm not sure why this is happening. I'm using two separate modals with two separate scripts that are identifying two separate classes. The first is the "Specials" Modal Window and the second is the "Emergency" Modal Window. Yet when I click the "Specials" links the "Emergency" Modal window opens. When I click the Emergency model window, it opens fine. How can this be fixed so that it works as intended? Thanks in advance for your assistance.

HTML & JQUERY for First Modal Window

                <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                   <div class="flipper">
                      <div class="front_03">
                         <img src="./images/free.png">
                      </div>
                      <div class="back_03">
                         <a class="button-to-click" href="#">
                            Blah...Blah..
                            Blah...Blah..<br />
                            [ CLICK HERE ]
                         </a>
                      </div>
                   </div>
                </div>

                <div class="popup-container">
                   <div class="specials_title">BLAH TITLE</div>
                   <p>Blah...Blah...Blah...</p>
                   <div class="coupon_container">
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                      <p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
                   </div>
                   <a class="popup-close closer" href="#">X</a>
                </div>

                <script>
                   $(document).ready(function() {
                      // config
                      popup = $('.popup-container');
                      clickme = $('.button-to-click');

                      // pop-up
                      vh = $(window).height();
                      vw = $(window).width();
                      bw = popup.width();
                      bh = popup.height();
                      clickme.click(function(e) {
                         e.preventDefault();
                         popup.fadeOut();
                         popup.css('left', vw/2 - bw/2);
                         popup.css('top', vh/2 - bh/2);
                         popup.fadeIn();
                      });
                      //close button
                      $('.popup-close').click(function() {
                         $('.popup-container').fadeOut();
                      });
                   });
                </script>

HTML & JQUERY for Second Modal Window

                <div class="co_R_content">
                   <button type="button" class="click_emergency">
                      <div class="led-content">CLICK HERE</div>
                      <div class="led-box">
                         <div class="led-red"></div>
                      </div>
                   </button>
                </div>

                <div class="popup-container popup-emergency">
                   <div class="emergency_title">EMERGENCY?</div>
                   <p>Blah...Blah...Blah...</p>
                   <div class="entry-content">
                      <div class="wpforms-container">
                         <form id="wpforms-form">
                            <--- WPForms HTML Goes Here --->
                         </form>
                      </div>  <!-- .wpforms-container -->   
                   </div><!-- .entry-content -->
                      
                   <a class="popup-close closer closer2" href="#">X</a>
                </div>

                <script>
                   $(document).ready(function() {
                      // config
                      popup = $('.popup-emergency');
                      clickme = $('.click_emergency');

                      // pop-up
                      vh = $(window).height();
                      vw = $(window).width();
                      bw = popup.width();
                      bh = popup.height();
                      clickme.click(function(e) {
                         e.preventDefault();
                         popup.fadeOut();
                         popup.css('left', vw/2 - bw/2);
                         popup.css('top', vh/2 - bh/2);
                         popup.fadeIn();
                      });
                      //close button
                      $('.popup-close').click(function() {
                         $('.popup-emergency').fadeOut();
                      });
                   });
                </script>

Answer 1

Renamed the Variables in the second script from popup & clickme to different names and that did the trick.

FROM:

            <script>
               $(document).ready(function() {
                  // config
                  popup = $('.popup-emergency');
                  clickme = $('.click_emergency');

                  // pop-up
                  vh = $(window).height();
                  vw = $(window).width();
                  bw = popup.width();
                  bh = popup.height();
                  clickme.click(function(e) {
                     e.preventDefault();
                     popup.fadeOut();
                     popup.css('left', vw/2 - bw/2);
                     popup.css('top', vh/2 - bh/2);
                     popup.fadeIn();
                  });
                  //close button
                  $('.popup-close').click(function() {
                     $('.popup-emergency').fadeOut();
                  });
               });
            </script>

TO:

            <script>
               $(document).ready(function() {
                  // config
                  popup2 = $('.popup-emergency');
                  clickme2 = $('.click_emergency');

                  // pop-up
                  vh = $(window).height();
                  vw = $(window).width();
                  bw = popup2.width();
                  bh = popup2.height();
                  clickme2.click(function(e) {
                     e.preventDefault();
                     popup2.fadeOut();
                     popup2.css('left', vw/2 - bw/2);
                     popup2.css('top', vh/2 - bh/2);
                     popup2.fadeIn();
                  });
                  //close button
                  $('.popup-close').click(function() {
                     $('.popup-emergency').fadeOut();
                  });
               });
            </script>