How do I use JavaScript with Yes / No buttons for an Age Verification popup?

Question

I'm not very experienced with JavaScript and I'm trying to set up an Age Verification pop up for a Square Space website. I'm having trouble with the Yes / No button functionality and I can't figure out how to make them work. The idea is that when "Yes" is clicked, the pop up goes away and that selection is remembered for the remainder of that session. When "No" is clicked, the site exits. Any help is greatly appreciated.

I have the following code pasted into the site-wide Header Code Injection:

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {
    //sessionStorage.setItem('advertOnce','true');
    $('.box').show();
  } else {
    $('.box').hide();
  };

  $('#btn-alpha').click(function() {
    sessionStorage.setItem('advertOnce', 'true');
    $('.box').hide();
  });

  $('#btn-beta').click(function() {

    window.location.href = 'http://google.com/';

  });
});

/*----------------------------------------------   
-Defualt to border-box
-----------------------------------------------  */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-family: helvetica;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: Raleway;
  line-height: 1.4;
}


/*----------------------------------------------   
--Fluid body sizing
-----------------------------------------------  */

body {
  font-size: 100%;
}

@media (min-width: 32em) {
  body {
    font-size: 110%;
  }
}

@media (min-width: 54em) {
  body {
    font-size: 111%;
  }
}

@media (min-width: 74em) {
  body {
    font-size: 115%;
  }
}

@media (min-width: 96em) {
  body {
    font-size: 135%;
  }
}

a.btn {
  background-color: #e3c827;
  color: #000;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
}

a.btn.btn-beta {
  background-color: #800000;
}

.overlay-verify {
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.box {
  background: #fff;
  position: relative;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  margin: 0 auto;
  z-index: 9;
  width: 70%;
  height: 40%;
  display: table;
}

.box .box-left,
.box .box-right {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 5%;
}

@media (min-width: 54em) {
  .box .box-left,
  .box .box-right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}

.box .box-left p,
.box .box-right p {
  position: relative;
  z-index: 3;
}

.box .box-left {
  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
  background-size: cover;
}

.box .box-left img {
  position: relative;
  z-index: 1;
  width: 9em;
}

.box .box-left:after {
  content: '';
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.box .box-right {
  background-color: #000000;
  text-align: center;
}

.box .box-right h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin: 0 auto;
}

.box .box-right p {
  color: #fff;
}

.box .box-right small {
  color: #fff;
}

.box .box-right .btn {
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 0.9em 1em 0.7em;
  margin: 1em auto;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main>
  <article class="box">
    <div class="box-left">
    </div>
    <div class="box-right">
      <h3>Age Verification</h3>
      <p>This site requires you to be 21 years or older to enter. </p>
      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha" id="refresh-page">YES</a>

      <a href="#" class="btn btn-beta" id="refresh-page">NO</a>
    </div>
  </article>

  <div class="overlay-verify"></div>
</main>

Answer 1

You are targetting the button classes as ids in your javascript. Replace the # for a . in these two lines:

$('#btn-alpha').click(function() {    // $('.btn-alpha')

and

$('#btn-beta').click(function() {     // $('.btn-beta')

It should work now, although the two buttons also have the same id like mentioned in the comments. Ids need to be unique, so at most one element has a certain id on the page.

Here is the corrected code (I commented out the part with sessionStorage):

jQuery(document).ready(function($) {
  /*
    if (sessionStorage.getItem('advertOnce') !== 'true') {
      //sessionStorage.setItem('advertOnce','true');

    } else {
      $('.box').hide();
    };
  */
  
  $('.box').show();
  
  $('.btn-alpha').click(function() {
    //sessionStorage.setItem('advertOnce', 'true');
    $('.box').hide();
  });

  $('.btn-beta').click(function() {

    window.location.href = 'http://google.com/';

  });
});

/*----------------------------------------------   
-Defualt to border-box
-----------------------------------------------  */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-family: helvetica;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: Raleway;
  line-height: 1.4;
}


/*----------------------------------------------   
--Fluid body sizing
-----------------------------------------------  */

body {
  font-size: 100%;
}

@media (min-width: 32em) {
  body {
    font-size: 110%;
  }
}

@media (min-width: 54em) {
  body {
    font-size: 111%;
  }
}

@media (min-width: 74em) {
  body {
    font-size: 115%;
  }
}

@media (min-width: 96em) {
  body {
    font-size: 135%;
  }
}

a.btn {
  background-color: #e3c827;
  color: #000;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
}

a.btn.btn-beta {
  background-color: #800000;
}

.overlay-verify {
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.box {
  background: #fff;
  position: relative;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  margin: 0 auto;
  z-index: 9;
  width: 70%;
  height: 40%;
  display: table;
}

.box .box-left,
.box .box-right {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 5%;
}

@media (min-width: 54em) {
  .box .box-left,
  .box .box-right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}

.box .box-left p,
.box .box-right p {
  position: relative;
  z-index: 3;
}

.box .box-left {
  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
  background-size: cover;
}

.box .box-left img {
  position: relative;
  z-index: 1;
  width: 9em;
}

.box .box-left:after {
  content: '';
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.box .box-right {
  background-color: #000000;
  text-align: center;
}

.box .box-right h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin: 0 auto;
}

.box .box-right p {
  color: #fff;
}

.box .box-right small {
  color: #fff;
}

.box .box-right .btn {
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 0.9em 1em 0.7em;
  margin: 1em auto;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main>
  <article class="box">
    <div class="box-left">
    </div>
    <div class="box-right">
      <h3>Age Verification</h3>
      <p>This site requires you to be 21 years or older to enter. </p>
      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha" id="refresh-page-yes">YES</a>

      <a href="#" class="btn btn-beta" id="refresh-page-no">NO</a>
    </div>
  </article>

  <div class="overlay-verify"></div>
</main>