Multiple Modals One Script
<p>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. </p>

<p><a href="http://jsfiddle.net/fkk4twn8/" rel="nofollow">JS Fiddle</a></p>

<p>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. </p>

<pre><code>  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 &lt;span&gt; (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";
  }
}
</code></pre>

<p>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.</p>