I'm not well versed in JavaScript, so I'm probably not explaining this right, but I have a jsfiddle. I have a script that pops up a modal with another page in it. If I'm using one link all is well and everything works. It's perfect for what I need.

There are times when I want to add a second link with the same ID so that it pops up with the same functionality, same page and everything, but when I do that only the first link on the page works and the second link fails.

If I remove the first link, the second one works fine.

I would appreciate any thoughts on how to fix this so they both work.

HTML:

<p>
  <a href="" id="link"
    >Add your thoughts (this works, but the second link doesn't unless this
    one is removed).</a
  >
</p>
<a href="" id="link">View or Add Comments</a><br />
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
<p>(Click background to exit popup)</p>

JavaScript:

     document.getElementById("link").onclick = function (e) {
    e.preventDefault();
    document.getElementById("popupiframe").src = "http://www.blankwebsite.com/"
    document.getElementById("popup").style.display = "block";
    document.getElementById("popupiframe").src =
      "http://www.blankwebsite.com/";

  document.getElementById("popupdarkbg").onclick = function () {
    document.getElementById("popup").style.display = "none";
    document.getElementById("popupdarkbg").style.display = "none";
  };

CSS:

  #comments {
    width: 100%;
    text-align: center;
    margin: 15px 0 15px 0;
  }

  #popup {
    display: none;
    position: fixed;
    top: 12%;
    left: 15%;
    width: 70%;
    height: 80%;
    background-color: white;
    z-index: 10;
  }

  #popup iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  #popupdarkbg {
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
  }