This last step on my Note app... When I click on view more modal window is created, but the wrong one

Question

'use strict';
// Select all elements needed for this task (querySelector)
const form = document.querySelector('.form');
const input = document.querySelector('.input__text');
let container = document.querySelector('.notes-container');
const button = document.querySelector('.btn');
const noteDiv = document.querySelector('.note');

let modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnClose = document.querySelectorAll('.close-modal');
const btnView = document.querySelector('.btn-view');
let noteCount = 0;

// Create function that reads when the button is clicked on form

form.addEventListener('submit', function (e) {
  e.preventDefault();

  // if input filed is empty note will not be added!
  if (!input.value == '') {
    // Every time i click on button, notCount is incremented by one. Then that count i store and use to count number of note
    if (button.click) noteCount++;
    // Creating div element where notes will go
    const divNotes = document.createElement('div');

    // Adding class to that div element
    divNotes.classList.add('note');

    // Inserting HTML content into created div
    const createdNote = (divNotes.innerHTML += `
  <h4 class="note__heading">Note ${noteCount}</h4>
              <p class="note__text">${input.value}</p>
              <button class="btn btn-view">View Detail</button>
  `);
    container.appendChild(divNotes);

    //

    container.addEventListener('click', function (e) {
      if (!e.target.classList.contains('btn-view')) {
        return;
      }

      modal.classList.remove('hidden');
      overlay.classList.remove('hidden');

      modal.innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4>
      <p class="note__text">${input.value}</p>
      <button class="close-modal">X</button>
      `;
    });

    modal.addEventListener('click', function (e) {
      if (!e.target.classList.contains('close-modal')) {
        return;
      }
      modal.classList.add('hidden');
      overlay.classList.add('hidden');
    });
  }
});

html {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
}

.container__app {
  text-align: center;
}
h1 {
  font-size: 4rem;
  font-weight: 100;
}

h3 {
  font-size: 2rem;
  color: green;
  margin-top: -40px;
}

.input__text {
  width: 1310px;
  height: 50px;
  margin-bottom: 15px;
  padding: 10px;
  font-size: 16px;
  resize: none;
}

label {
  bottom: 36px;
  padding: 3px;
  vertical-align: top;
  font-size: 25px;
  font-weight: 600;
}

.btn-green {
  color: white;
  background-color: green;
  width: 100px;
  height: 35px;
  border-radius: 5px;
  border: none;
}
.btn-span {
  margin-top: 15px;
}
.btn-green:active {
  transform: translateY(4px);
}

.notes-container {
  margin: auto;
  padding: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 1.5rem;
}
.note {
  border: 1px solid gray;
  padding-bottom: 18px;
  margin-top: 15px;
}

.note__text {
  overflow: hidden;
  max-height: 7rem;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  word-wrap: break-word;
  padding: 0 20px 4px 20px;
}

h4 {
  font-size: 25px;
}

p {
  font-size: 20px;
}

.btn-view {
  color: white;
  background-color: rgb(24, 113, 197);
  width: 100px;
  height: 35px;
  border-radius: 5px;
  border: none;
}

.btn-view:active {
  transform: translateY(4px);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  border-radius: 5px;

  background-color: white;
  padding: 6rem;
  box-shadow: 0 3rem 5rem rgba(0 0 0 0.3);
  z-index: 10;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.hidden {
  display: none;
}

.close-modal {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Note Taker App</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container__app">
      <h1>Note Taker</h1>
      <h3>Add a new note:</h3>

      <div class="input__field">
        <form class="form">
          <label class="input__text-name">Note: </label>
          <textarea
            rows="5"
            cols=""
            class="input__text"
            placeholder="Write your note here"
          ></textarea>
          <label for="submit"></label><br />
          <button class="btn btn-green" type="submit">Add Note</button>
        </form>
      </div>

      <div class="modal hidden">
        <button class="close-modal">X</button>
      </div>
      <div class="overlay hidden"></div>

      <div class="notes-container">
        <!-- <div class="note">
          <h4 class="note__heading">Note1</h4>
          <p class="note__text">
            MY note text
          </p>
          <div class="note__btn">
            <button class="btn btn-view">View Detail</button>
          </div>
        </div> -->
      </div>
    </div>
  </body>
</html>

Im new to programming, please help. I finished almost everything except last step. This is the problem: when I press button view more (it should create modal window related to that note and button). Thing is that everything is working fine when you press buttons in order (like note1, note2, note3), but if you press 6th button and then the first one, only last element will be created. If someone can explain me how this works. https://codepen.io/Niksani/pen/GROXGyN

 const form = document.querySelector('.form');
    const input = document.querySelector('.input__text');
    let container = document.querySelector('.notes-container');
    const button = document.querySelector('.btn');
    const noteDiv = document.querySelector('.note');
    
    let modal = document.querySelector('.modal');
    const overlay = document.querySelector('.overlay');
    const btnClose = document.querySelectorAll('.close-modal');
    const btnView = document.querySelector('.btn-view');
    let noteCount = 0;
    
    
    form.addEventListener('submit', function (e) {
      e.preventDefault();

  
  if (!input.value == '') {
    and use to count number of note
    if (button.click) noteCount++;
    
    const divNotes = document.createElement('div');

  
    divNotes.classList.add('note');

    
    const createdNote = (divNotes.innerHTML += `
  <h4 class="note__heading">Note ${noteCount}</h4>
              <p class="note__text">${input.value}</p>
              <button class="btn btn-view">View Detail</button>
  `);
    container.appendChild(divNotes);

    //

    container.addEventListener('click', function (e) {
      if (!e.target.classList.contains('btn-view')) {
        return;
      }

      modal.classList.remove('hidden');
      overlay.classList.remove('hidden');

      modal.innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4>
      <p class="note__text">${input.value}</p>
      <button class="close-modal">X</button>
      `;
    });

    modal.addEventListener('click', function (e) {
      if (!e.target.classList.contains('close-modal')) {
        return;
      }
      modal.classList.add('hidden');
      overlay.classList.add('hidden');
    });
  }
});