Two Modals Windows On Page - But Only Displaying One - html

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>