Javascript button to open a modal; button doesn't work when in a list

Question

Basically, I want to press a button (matched to a person) that brings up a pop-up (right now using a modal) of an of another page which will vary based on which person it is. I am using a basic template from the w3school and I can get one button working, but when I try and add a button into the list to match a person, the modal does not open. Obviously for each button to be assigned to one person they will need to have their own element id, but why cant I get even one button to work? Its the "show on map" button in the snippet below. The top most "show on map" button works in the sense that it brings up the modal, but the same buttons in the list do nothing.

Thank you in advance.

 // Get the modal
 var modal = document.getElementById('myModal');

 // Get the button that opens the modal
 var btn = document.getElementById("myBtn");

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

 // When the user clicks the button, open the modal
 btn.onclick = function() {
   modal.style.display = "block";
 }

 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
   modal.style.display = "none";
 }

 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
   if (event.target == modal) {
     modal.style.display = "none";
   }
 }

/*DESKTOP*/

/* The Modal (background) */

@media screen and (min-width: 801px) {
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: hidden;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, .4);
    /* Black w/ opacity */
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
  }
  /* Modal Content */
  .modal-content {
    position: relative;
    bottom: 0;
    background-color: clear;
    width: 500px;
    height: 700px;
    margin: 0% auto 15% auto;
    /* 5% from the top, 15% from the bottom and centered */
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    border: solid 2px;
    border-color: #ffc948;
    overflow: hidden;
  }
  /* The Close Button */
  .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .modal-header {
    padding: 2px 16px;
    background-color: #640006;
    color: white;
    height: 2em;
  }
  .modal-body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  /* Add Animation */
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
  }
}
/*MOBILE*/

/* The Modal (background) */

@media screen and (max-width: 800px) {
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: hidden;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, .4);
    /* Black w/ opacity */
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
  }
  /* Modal Content */
  .modal-content {
    position: relative;
    bottom: 0;
    background-color: clear;
    width: 500px;
    height: 700px;
    margin: 0% auto 15% auto;
    /* 5% from the top, 15% from the bottom and centered */
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    border: solid 2px;
    border-color: #ffc948;
    overflow: hidden;
  }
  /* The Close Button */
  .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .modal-header {
    padding: 2px 16px;
    background-color: #640006;
    color: white;
    height: 2em;
  }
  .modal-body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  /* Add Animation */
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
  }
}
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #810008;
}
a.menu-link {
  color: #ffc948;
  display: block;
  text-decoration: none;
  padding-top: 25px;
}
.menu-link span {
  border-bottom: solid 3px #000;
  border-top: double 10px #000;
  display: inline-block;
  height: 4px;
  margin: 0 5px -3px 0;
  width: 30px;
}
.menu-link:hover span {
  border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
  clear: both;
  display: flex;
  flex-flow: column;
  margin: 0;
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  padding-left: 15%;
}
.menu.active {
  background: #640006;
  border-bottom: 1px solid #64006;
  border-top: 1px solid #64006;
  margin: 1em 0 1em -12px;
  max-height: 55em;
  width: 100vw;
}
.js .menu > ul ul.active {
  margin: 0;
  max-height: 55em;
  padding: 0;
}
.menu > ul {
  padding: 0;
}
nav li {
  display: inline-block;
  margin: 0;
  position: relative;
}
.menu li a {
  color: #ffc948;
  display: inline-block;
  font-size: 1.04em;
  letter-spacing: .05em;
  line-height: 2.5em;
  text-decoration: none;
}
span.has-subnav {
  display: block;
  font-size: 1em;
  line-height: 2.5em;
  position: absolute;
  right: 20px;
  padding: 0 0.5em;
  top: 0;
}
/*NAV MENU CSS MOBILE */

@media screen and (max-width: 800px) {
  .menu,
  .menu > ul ul {
    margin: 0;
    max-height: 0;
    overflow: hidden;
  }
  .menu li a {
    border-bottom: 1px solid #ffc948;
    display: block;
    padding-left: 15px;
  }
  .menu li li a {
    padding-left: 50px;
  }
  .menu li:last-child a {
    border: none;
  }
  .menu li li:last-child a {
    border-bottom: 1px solid #ffc948;
  }
  .menu li:hover {
    background: #640006;
  }
}
.menu li a:hover {
  background: #ffc948;
  color: black;
}
/*NAV MENU CSS DESKTOP*/

@media screen and (min-width: 801px) {
  nav {
    border-bottom: 1px solid #ffc948;
  }
  a.menu-link {
    display: none;
  }
  .js .menu,
  .js .menu > ul ul {
    max-height: none;
    overflow: visible;
  }
  .js .menu > ul li:hover > ul {
    display: flex;
  }
  .menu ul {
    display: flex;
    flex-flow: row;
    height: 44px;
    justify-content: space-between;
    margin: 0;
    padding: 0;
  }
  .menu span.has-subnav {
    display: none;
  }
  .menu li a:hover {
    color: rgb(0, 0, 0);
  }
  .menu li li a:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
  }
  .menu ul ul {
    background: #640006;
    border: solid 1px rgba(0, 0, 0, 1);
    border-radius: 2px 2px 5px 5px;
    border-top: solid 2px transparent;
    display: none;
    height: auto;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 43px;
    width: 150px;
    z-index: 999;
  }
  .chrome .js .menu > ul ul {
    top: 43px;
  }
  .menu ul ul.wide {
    width: 300px;
  }
  .menu ul ul li {
    border-bottom: solid 1px rgba(0, 0, 0, 0.5);
    display: inline-block;
    position: relative;
  }
  .menu > ul ul li:last-child {
    border-bottom: none;
  }
  .menu ul ul li a {
    display: block;
    padding-left: 10px;
  }
}
a {
  text-decoration: none;
  color: #ffc948;
}
ul,
li {
  list-style: none;
  vertical-align: middle;
}
ul.list {
  padding-left: 20px;
}
.alphalist {
  position: fixed;
  right: 0;
  font-size: 12px;
  text-align: center;
  display: inline-block;
  z-index: 2;
  top: auto;
  height: 100%;
}
.list li {
  border-bottom: 1px solid #ffc948;
  line-height: 44px;
  height: 44px;
}
.list .divider {
  font-size: 20px;
  font-weight: bold;
  background: #fafafa;
  box-shadow: -60px 0 0 #fafafa;
  line-height: 28px;
  height: 28px;
  margin-top: -1px;
  position: -webkit-sticky;
  top: 44px;
}
h1 {
  color: #ffc948;
  font-size: 30px;
  font-family: "Baskerville Old Face";
  letter-spacing: 4px;
  text-align: center;
  line-height: 30px;
}
h2 {
  color: #ffc948;
  font-size: 20px;
  font-family: "Baskerville Old Face";
  letter-spacing: 4px;
  text-align: center;
  line-height: auto;
  margin: auto;
}
h3 {
  line-height: 44px;
  height: 44px;
  color: #ffc948;
  width: 100%;
  position: absolute;
  text-align: center;
  z-index: 10;
}
#scrolling {
  padding-top: 44px;
  padding-right: auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .list .divider {
    top: 0;
  }
}
.modal-button {
  background-color: #fafafa;
  border: none;
  color: black;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: inherit;
  margin: 4px 2%;
  float: right;
  cursor: pointer;
}
.button {
  background-color: #fafafa;
  border: none;
  color: black;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: inherit;
  margin: 4px 2%;
  float: right;
  cursor: pointer;
}

<button id="myBtn">Show on Map</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times</span>
      <h2>Career Fair Map</h2>
    </div>
    <div class="modal-body">
      <iframe src="map.html" width="500px" height="700px">
      </iframe>

    </div>
  </div>
</div>

<div id="scrolling">
  <ul class="list">
    <li class="divider" id="a">A</li>
    <li><a href="#">Amelia Webster</a>
      <button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
      <button class="button" id="myBtn">Show on Map</button>
      <li><a href="#">Andrew WifKinson</a>
      </li>
      <li><a href="#">Archibald Carrington</a>
        <button class="modal-button" id="myBtn">Show on Map</button>
      </li>
      <li><a href="#">Ariana Clapton</a>
      </li>
      <li><a href="#">Ashley Carter</a>
      </li>
      <li class="divider" id="b">B</li>
      <li><a href="#">Barney Mercer</a>
      </li>
      <li><a href="#">Barry Goodman</a>
      </li>
      <li><a href="#">Brenda Brown</a>
      </li>
      <li><a href="#">Brooke Creighton</a>
      </li>
      <li class="divider" id="c">C</li>
      <li><a href="#">Camilla Kapinksy</a>
      </li>
      <li><a href="#">Caroline Miller</a>
      </li>
      <li><a href="#">Charlotte Gardner</a>
      </li>
      <li><a href="#">Cynthia Monroe</a>
      </li>
      <li class="divider" id="e">E</li>
      <li><a href="#">Elizabeth Abramson</a>
      </li>
      <li><a href="#">Elizabeth Cook</a>
      </li>
      <li><a href="#">Ernie Carter</a>
      </li>
      <li><a href="#">Evelyn Nash</a>
      </li>
      <li class="divider" id="f">F</li>
      <li><a href="#">Fyodor Dostoevsky</a>
      </li>
  </ul>
</div>

Answer 1

In HTML the id attribute is unique. As such, you are only ever binding to the first button with the id of myBtn (I go and get the element by id and I only get one because that's what's expected).

You will need to make the IDs unique and bind each one's click event, that or apply a class, get an array of buttons by class, and bind each button in the array.

If you had a class named showModalButton set on each button you could get the references with:

var elements = document.getElementsByClassName('showModalButton');

and then iterate over the elements and bind:

for(var i = 0; i < elements.length; ++i) {
    elements[i].onclick = function() {
        modal.style.display = "block";
       }
}

Answer 2

Id's should always be unique.

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

That is also the origin of your problem. document.getElementById("theid"); will return the first element (and also the only element expected to use this id). However you want to assign your onclick method to multiple buttons.

You should consider to use the name attribute instead. Then you can use document.getElementsByName("myBtn") in order to loop through all buttons and register your listener. The code below contains comments that should explain my changes.

 // Get the modal
 var modal = document.getElementById('myModal');

 // Get all buttons that should opens the modal
 var btns = document.getElementsByName("myBtn");

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];
 
 // The iframe inside of the Modal
 var modalIFrame = document.getElementById("modal-iframe");

 // When the user clicks the button, open the modal
 for(var i = 0; i < btns.length; i++) {
   (function(i) {
     var btn = btns[i];
     // you should use addEventListener("click", function() {}); here
     btn.onclick = function() {
       // this will set the iframe url every time you press a button and add the "id" of the button that was pressed as a parameter. "id" is just the current index of the for loop for now.
       modalIFrame.setAttribute("src", "map.html?id=" + i);
       modal.style.display = "block";
     }
   })(i);
 }

 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
   modal.style.display = "none";
 }

 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
   if (event.target == modal) {
     modal.style.display = "none";
   }
 }

/*DESKTOP*/

/* The Modal (background) */

@media screen and (min-width: 801px) {
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: hidden;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, .4);
    /* Black w/ opacity */
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
  }
  /* Modal Content */
  .modal-content {
    position: relative;
    bottom: 0;
    background-color: clear;
    width: 500px;
    height: 700px;
    margin: 0% auto 15% auto;
    /* 5% from the top, 15% from the bottom and centered */
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    border: solid 2px;
    border-color: #ffc948;
    overflow: hidden;
  }
  /* The Close Button */
  .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .modal-header {
    padding: 2px 16px;
    background-color: #640006;
    color: white;
    height: 2em;
  }
  .modal-body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  /* Add Animation */
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
  }
}
/*MOBILE*/

/* The Modal (background) */

@media screen and (max-width: 800px) {
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: hidden;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, .4);
    /* Black w/ opacity */
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
  }
  /* Modal Content */
  .modal-content {
    position: relative;
    bottom: 0;
    background-color: clear;
    width: 500px;
    height: 700px;
    margin: 0% auto 15% auto;
    /* 5% from the top, 15% from the bottom and centered */
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    border: solid 2px;
    border-color: #ffc948;
    overflow: hidden;
  }
  /* The Close Button */
  .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .modal-header {
    padding: 2px 16px;
    background-color: #640006;
    color: white;
    height: 2em;
  }
  .modal-body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  /* Add Animation */
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
  }
}
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #810008;
}
a.menu-link {
  color: #ffc948;
  display: block;
  text-decoration: none;
  padding-top: 25px;
}
.menu-link span {
  border-bottom: solid 3px #000;
  border-top: double 10px #000;
  display: inline-block;
  height: 4px;
  margin: 0 5px -3px 0;
  width: 30px;
}
.menu-link:hover span {
  border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
  clear: both;
  display: flex;
  flex-flow: column;
  margin: 0;
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  padding-left: 15%;
}
.menu.active {
  background: #640006;
  border-bottom: 1px solid #64006;
  border-top: 1px solid #64006;
  margin: 1em 0 1em -12px;
  max-height: 55em;
  width: 100vw;
}
.js .menu > ul ul.active {
  margin: 0;
  max-height: 55em;
  padding: 0;
}
.menu > ul {
  padding: 0;
}
nav li {
  display: inline-block;
  margin: 0;
  position: relative;
}
.menu li a {
  color: #ffc948;
  display: inline-block;
  font-size: 1.04em;
  letter-spacing: .05em;
  line-height: 2.5em;
  text-decoration: none;
}
span.has-subnav {
  display: block;
  font-size: 1em;
  line-height: 2.5em;
  position: absolute;
  right: 20px;
  padding: 0 0.5em;
  top: 0;
}
/*NAV MENU CSS MOBILE */

@media screen and (max-width: 800px) {
  .menu,
  .menu > ul ul {
    margin: 0;
    max-height: 0;
    overflow: hidden;
  }
  .menu li a {
    border-bottom: 1px solid #ffc948;
    display: block;
    padding-left: 15px;
  }
  .menu li li a {
    padding-left: 50px;
  }
  .menu li:last-child a {
    border: none;
  }
  .menu li li:last-child a {
    border-bottom: 1px solid #ffc948;
  }
  .menu li:hover {
    background: #640006;
  }
}
.menu li a:hover {
  background: #ffc948;
  color: black;
}
/*NAV MENU CSS DESKTOP*/

@media screen and (min-width: 801px) {
  nav {
    border-bottom: 1px solid #ffc948;
  }
  a.menu-link {
    display: none;
  }
  .js .menu,
  .js .menu > ul ul {
    max-height: none;
    overflow: visible;
  }
  .js .menu > ul li:hover > ul {
    display: flex;
  }
  .menu ul {
    display: flex;
    flex-flow: row;
    height: 44px;
    justify-content: space-between;
    margin: 0;
    padding: 0;
  }
  .menu span.has-subnav {
    display: none;
  }
  .menu li a:hover {
    color: rgb(0, 0, 0);
  }
  .menu li li a:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
  }
  .menu ul ul {
    background: #640006;
    border: solid 1px rgba(0, 0, 0, 1);
    border-radius: 2px 2px 5px 5px;
    border-top: solid 2px transparent;
    display: none;
    height: auto;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 43px;
    width: 150px;
    z-index: 999;
  }
  .chrome .js .menu > ul ul {
    top: 43px;
  }
  .menu ul ul.wide {
    width: 300px;
  }
  .menu ul ul li {
    border-bottom: solid 1px rgba(0, 0, 0, 0.5);
    display: inline-block;
    position: relative;
  }
  .menu > ul ul li:last-child {
    border-bottom: none;
  }
  .menu ul ul li a {
    display: block;
    padding-left: 10px;
  }
}
a {
  text-decoration: none;
  color: #ffc948;
}
ul,
li {
  list-style: none;
  vertical-align: middle;
}
ul.list {
  padding-left: 20px;
}
.alphalist {
  position: fixed;
  right: 0;
  font-size: 12px;
  text-align: center;
  display: inline-block;
  z-index: 2;
  top: auto;
  height: 100%;
}
.list li {
  border-bottom: 1px solid #ffc948;
  line-height: 44px;
  height: 44px;
}
.list .divider {
  font-size: 20px;
  font-weight: bold;
  background: #fafafa;
  box-shadow: -60px 0 0 #fafafa;
  line-height: 28px;
  height: 28px;
  margin-top: -1px;
  position: -webkit-sticky;
  top: 44px;
}
h1 {
  color: #ffc948;
  font-size: 30px;
  font-family: "Baskerville Old Face";
  letter-spacing: 4px;
  text-align: center;
  line-height: 30px;
}
h2 {
  color: #ffc948;
  font-size: 20px;
  font-family: "Baskerville Old Face";
  letter-spacing: 4px;
  text-align: center;
  line-height: auto;
  margin: auto;
}
h3 {
  line-height: 44px;
  height: 44px;
  color: #ffc948;
  width: 100%;
  position: absolute;
  text-align: center;
  z-index: 10;
}
#scrolling {
  padding-top: 44px;
  padding-right: auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .list .divider {
    top: 0;
  }
}
.modal-button {
  background-color: #fafafa;
  border: none;
  color: black;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: inherit;
  margin: 4px 2%;
  float: right;
  cursor: pointer;
}
.button {
  background-color: #fafafa;
  border: none;
  color: black;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: inherit;
  margin: 4px 2%;
  float: right;
  cursor: pointer;
}

<!-- Changed id="myBtn" to name="myBtn" -->
<button name="myBtn">Show on Map</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times</span>
      <h2>Career Fair Map</h2>
    </div>
    <div class="modal-body">
      <iframe id="modal-iframe" src="map.html" width="500px" height="700px">
      </iframe>

    </div>
  </div>
</div>

<div id="scrolling">
  <ul class="list">
    <li class="divider" id="a">A</li>
    <li><a href="#">Amelia Webster</a>
      <button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
      <!-- Changed id="myBtn" to name="myBtn" -->
      <button class="button" name="myBtn">Show on Map</button>
      <li><a href="#">Andrew WifKinson</a>
      </li>
      <li><a href="#">Archibald Carrington</a>
        <!-- Changed id="myBtn" to name="myBtn" -->
        <button class="modal-button" name="myBtn">Show on Map</button>
      </li>
      <li><a href="#">Ariana Clapton</a>
      </li>
      <li><a href="#">Ashley Carter</a>
      </li>
      <li class="divider" id="b">B</li>
      <li><a href="#">Barney Mercer</a>
      </li>
      <li><a href="#">Barry Goodman</a>
      </li>
      <li><a href="#">Brenda Brown</a>
      </li>
      <li><a href="#">Brooke Creighton</a>
      </li>
      <li class="divider" id="c">C</li>
      <li><a href="#">Camilla Kapinksy</a>
      </li>
      <li><a href="#">Caroline Miller</a>
      </li>
      <li><a href="#">Charlotte Gardner</a>
      </li>
      <li><a href="#">Cynthia Monroe</a>
      </li>
      <li class="divider" id="e">E</li>
      <li><a href="#">Elizabeth Abramson</a>
      </li>
      <li><a href="#">Elizabeth Cook</a>
      </li>
      <li><a href="#">Ernie Carter</a>
      </li>
      <li><a href="#">Evelyn Nash</a>
      </li>
      <li class="divider" id="f">F</li>
      <li><a href="#">Fyodor Dostoevsky</a>
      </li>
  </ul>
</div>