I have a page that needs to have different modal boxes open when their corresponding link on the page is clicked. I've got the structure and javascript to work for ONE window, but I can't get it to work for more than one. I am thinking I need to loop through each modal box...but can't quite figure out the syntax.

This is for a client's WordPress site, and I'm using Advanced Custom Fields to populate the content. The page isn't published yet, so here's a codepen that shows my code: http://codepen.io/FelixB/pen/EPvEVG

The code:

var modal = document.getElementsByClassName('modal-window');



var btn = document.getElementsByClassName(click-to-open);



var span = document.getElementsByClassName(close)[0];



for (var i = 0; i < btn.length; i++) {

  var thisBtn = btn[i]

  thisBtn.onclick = function() {

    alert(hello);



    //modal.style.display = block;

  }

}



span.onclick = function() { 

  modal.style.display = none;

}



window.onclick = function(event) {



}