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

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 >Note ${noteCount}</h4>
              <p >${input.value}</p>
              <button >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 >Note ${noteCount}</h4>
      <p >${input.value}</p>
      <button >X</button>
      `;
    });

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

CodePudding user response：

'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 >Note ${noteCount}</h4>
              <p id='note${noteCount}' >${input.value}</p>
              <button  value='${noteCount}'>View Detail</button>
  `);
    container.appendChild(divNotes);

    //

    container.addEventListener('click', function (e) {
      
      if (!e.target.classList.contains('btn-view')) {
        
        return;
      }
      let showNote = '';
      showNote = e.target.value;
      let noteText = document.getElementById(`note${showNote}`).innerHTML;
      modal.classList.remove('hidden');
      overlay.classList.remove('hidden');

      modal.innerHTML = `<h4 >Note ${showNote}</h4>
      <p >${noteText}</p>
      <button >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;
}

    <div >
      <h1>Note Taker</h1>
      <h3>Add a new note:</h3>

      <div >
        <form >
          <label >Note: </label>
          <textarea
            rows="5"
            cols=""
            
            placeholder="Write your note here"
          ></textarea>
          <label for="submit"></label><br />
          <button  type="submit">Add Note</button>
        </form>
      </div>

      <div >
        <button >X</button>
      </div>
      <div ></div>

      <div >
        <!-- <div >
          <h4 >Note1</h4>
          <p >
            MY note text
          </p>
          <div >
            <button >View Detail</button>
          </div>
        </div> -->
      </div>
    </div>

check out the new event listener for your btn.click event...I am determining which note to show by getting the button value attribute that was added to the string literal....I am using that value to get the text of the note by giving the p an id and referencing that....I believe this gives you what you are looking for