JavaScript modal is unable to open

I’m making a note taker app that gives you the option to view said note in a modal whenever the button is clicked. There are two ways the close it by clicking the "X" button or by clicking outside of the modal.
I’m having trouble opening the modal on the second note whenever it’s generated. To add to that, once the second one is generated I’m still able to open the first modal, but not close it. How could I

class Input {
  constructor(note) {
    this.note = note;
  }
}

class UI {
  addNote(input) {
    // Get table body below form
    const content = document.querySelector(".content");
    // Create tr element
    const row = document.createElement("tr");
    // Insert new HTML into div
    row.innerHTML = `
      <td>
        ${input.note}
        <br><br>
        <button class="modalBtn">View Note</button>
      </td>
    `;

    content.appendChild(row);

    // Event listener to make modal
    document.querySelector(".modalBtn").addEventListener("click",       function(e) {
      // Get container div
      const container = document.querySelector(".container");
      // Create div
      const div = document.createElement("div");
      // Assign class to it
      div.className = "modal";
      // Insert HTML into div
      div.innerHTML = `
        <div class="modal-content">
          <span class="closeBtn">&times;</span>
          <div>
            <p>${input.note}</p>
          </div>
        </div>
      `;
      // Append the new div to the container div
      container.appendChild(div);
      
      // Get modal
      const modal = document.querySelector(".modal");

      // Event listener to close modal when "x" is clicked
      document.querySelector(".closeBtn").addEventListener("click",       function() {
        container.removeChild(modal);
      });

      // Event listener to close when the window outside the modal       is clicked
      window.addEventListener("click", function(e) {
        if (e.target === modal) {
          container.removeChild(modal);
        }
      });
    });
  }

  // Clear input field
  clearInput() {
    note.value = "";
  }
  
}

// Event listener for addNote
document.getElementById("note-form").addEventListener("submit", function(e) {
  // Get form value
  const note = document.getElementById("note").value;
  // Instantiate note
  const input = new Input(note);

  // Instantiate UI
  const ui = new UI();

  // Validate form (make sure input is filled)
  if (note === "") {
    // Error alert
    alert("Please fill in text field!");
  }
  else {
    // Add note
    ui.addNote(input);

    // Clear input field
    ui.clearInput();
  }

  e.preventDefault();
});
h5 {
    color: green;
}

.modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 20% auto;
    padding: 30px;
    width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-direction: 1s;
}

.closeBtn {
    color: #aaa;
    /* float: right; */
    font-size: 30px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.closeBtn:hover,
.closeBtnBtn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.closeBtn + div {
    margin-top: 2rem;
}

@keyframes modalopen {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" integrity="sha512-5fsy+3xG8N/1PV5MIJz9ZsWpkltijBI48gBzQ/Z2eVATePGHOkMIn+xTDHIfTZFVb9GMpflF2wOWItqxAP2oLQ==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
  <title>Note Taker</title>
</head>
<body>
  <div class="container">
    <h1>Note Taker</h1>
    <h5>Add A New Note:</h5>
    <form id="note-form">
      <div>
        <label>Note:</label>
        <textarea name="Note" id="note" class="u-full-width">               </textarea>
      </div>
      <div>
        <button type="submit" class="button-primary">Add                   Note</button>
      </div>
    </form>
    <table>
      <tbody class="content"></tbody>
    </table>
  </div>
  
  <script src="app.js"></script>
</body>
</html>

fix this?

96 thoughts on “JavaScript modal is unable to open”