Q:

Multiple Modals One Script

I will have some where around 40 different Modals on the same page, and rather than having a scrip line for each, I am trying to create a way to use one script to run the whole thing. Started with code that worked to display one at a time, but I tried to re work it so that any time the link is clicked it updates the code and the correct Modal is displayed. 
JS Fiddle
I found others on here, but didn't seem to answer why mine wasn't working. I am new to JavaScript, so any help is appreciated. 
  var modal = "",
  lnk = "",
  lnkNumb = "",
  modalID = "",
  lnkID = "",
  span = document.getElementsByClassName("close")[0];

$('[class^="lnk"]').on('click', function(e) {
  e.preventDefault();
  lnkNumb = this.className.replace('lnk', '');
  lnkID = ('lnk' + lnkNumb);
  lnk = document.getElementById(lnkID);
  modalID = ('modal' + lnkNumb);
  modal = document.getElementById(modalID);
});

// When the user clicks the Link, open the modal 
lnk.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";
  }
}

The content I will be displaying in the Modal will have at least one header, and anywhere from 1 to 6 paragraphs below that. I need to be able to style and format each of them using styles and tags.

A:

I would make a single modal element then populate it's content dynamically based on a JSON object like this (CSS can stay the same).  When a link is clicked, the '.modal-btn' click listener gets that link's data-modal-id attribute, then uses that attribute to access the 'modalData' JSON object and it's relative data:
HTML:
<a id="btnB12" class="modal-btn" data-modal-id="B12" href="#">B12</a>
<a id="btnB02" class="modal-btn" data-modal-id="B02" href="#">B02</a>

<!-- single modal -->
<div class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <h2 class="modal-header"></h2>
    <p class="modal-body"></p>
  </div>
</div>

JS:
var modalData = {
  "B12": {
    "header":"Modal B12",
    "body":"Here's the text for Modal B12"
  },
  "B02": {
    "header":"Modal B02",
    "body":"Here's the text for Modal B02"
  }
}

//open modal
$('.modal-btn').on('click', function(e) {
  e.preventDefault();
  var modalId = $(e.currentTarget).data('modal-id');
  $('.modal-header').text(modalData[modalId].header);
  $('.modal-body').text(modalData[modalId].body);
  $('.modal').show();
});

//close modal
$('.close').on('click', function(e){
    $('.modal').hide();
});

The JSON object could also be obtained via an AJAX call instead, if you wanted a modal that might be based off an external API's JSON data.

