I am trying to show two different texts in html using a modal view but the javascript overlaps and doesn't work properly

Question

Basically, I have a register page I'm trying to finish and at the checkbox where you agree with terms I have this text I agree to NAME's "Terms & Conditions" and their "Privacy Policy". Between the double-quotes there are two separate paragraphs with on click calls to a JavaScript function to two different ".js" files. First one represents the calls and operations made for the first button "Terms & Conditions" and so on. When I try to mix them, they either show the same text, or they don't show anything at all. I will also leave a small bit of code because I believe it's easier to understand my problem.

I've tried mixing them together in a single js files but it worked even worse afterwards. When I take one of the files out, the other works properly.

<label class="auth_margin"><input id="agree" type="checkbox" name="agree"> I agree to NAME's </label><p id="termsBtn">&nbsp;Terms & Conditions</p> and their <p id="privacyBtn">Privacy Policy.</p><br/>

And the JavaScript files:

var modal = document.getElementById('termsModal');
var btn = document.getElementById("termsBtn");
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 == pmodal) {
    pmodal.style.display = "none";
  }
}

---

var pmodal = document.getElementById('privacyModal');
var pbtn = document.getElementById("privacyBtn");
var span = document.getElementsByClassName("close")[0];
pbtn.onclick = function() {
  pmodal.style.display = "block";
}
span.onclick = function() {
  pmodal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == pmodal) {
    pmodal.style.display = "none";
  }
}

Answer 1

Does the following code behaves as you expected? You need a single js file for it. There are some style edits, but you can change them afterwards from CSS. Also, I preferred to use <span> instead of <p> for the two click-able texts. The difference is that <p> is a block element and <span> is not. They look nicer on a single line (in my opinion).

Nothing fancy, plain html/css/js.

var tbtn = document.getElementById("termsBtn");
var pbtn = document.getElementById("privacyBtn");
var tmodal = document.getElementById('tmodal');
var pmodal = document.getElementById('pmodal');

tbtn.onclick = function() {
  pmodal.style.display = "none";
  tmodal.style.display = "block";
};

pbtn.onclick = function() {
  tmodal.style.display = "none";
  pmodal.style.display = "block";
};

window.onclick = function(event) {
  if (event.target == pmodal) {
    pmodal.style.display = "none";
  } else if (event.target == tmodal) {
    tmodal.style.display = "none";
  }
}

#termsBtn,
#privacyBtn {
  color: blue;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<label class="auth_margin"><input id="agree" type="checkbox" name="agree"> I agree to NAME's </label><span id="termsBtn">&nbsp;Terms & Conditions</span> and their <span id="privacyBtn">Privacy Policy.</span><br/>

<div id="tmodal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text for Terms & Conditions</p>
  </div>
</div>

<div id="pmodal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text for Privacy Policy</p>
  </div>
</div>

Cheers!