Add a variable from a Post ID within a loop to a Modal Query getElementByID

0

I have a page which has 2 (but the potential of many many more) buttons which open up modal windows, each modal has a form and some text on it which is individual to that button.

All of these items are called from a Custom Post Type from within WordPress.

The issue i’m having is that i’m currently using a Modal Window JS and CSS:

    var modal = document.getElementById('myModal');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
        modal.style.display = "block";
    }
    span.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        } 
    }

Then i’m using the usual to open have the details for the Modal within the loop for the item on my page.

My issue is, is that the id is individual, so it only works once. I need to find a way to allow for a post_ID from the loop to be involved in the opening. I have tried adding “> and then changing out the var modal = document.getElementByID(‘myModal’); to document.querySelector(“[id^=’myModal-‘]”); but this didn’t work.

The code is currently being used here: https://www.ubersmith.com/webinars-and-events/

You will see that the first “On Demand” link works but the second doesn’t.

Can anyone help me work this out. I’m sure that I’m just missing one bit of the puzzle.

Any help would be great!

Thanks in advance 🙂