Consolidating jQuery

JavaScript
1

Hopefully someone here can help me out or at least give me some good pointers.

I am working with the modals from the Codepen https://codepen.io/scottohara/pen/OEeBJe. That code works just fine but I need to use multiple modals and this code is only for 2.

I can add variables like this but this will get out of hand

var btn3 = document.getElementById('m-button3');
var btn4 = document.getElementById('m-button4');

var dialog3 = document.getElementById('m-dialog3');
var dialog4 = document.getElementById('m-dialog4');

these functions that revert the HTML to normal upon close will also need to be consolidated:

btn.addEventListener('click', function () {});
btnClose.addEventListener('click', function () {});

Is this the best code to use or can you suggest another?

3

There will be about 15 modals, but only 1 showing at a time.

5

they will be styled the same but with unique content in each one.

6

the trigger will be a simple button click

8

correctly assumed, yes.

10

header
text paragraph
shortcode for an audioplayer (This is on a WP site)

12

It is a custom page within a site so I am manually adding the whole thing.

14

Hmm, yes this could work. Thank you for the advice.