title: How I make different objects from one class function?
body: <p>I'm making a note-taker app.</p>
  <p>The problem is....when I click the 'view detail' button which I created, no matter what button I click among these, it shows me the modal of last content that I made.</p>
  <p>I believe it shows me the content from the last object I created from the class function. And the class function keeps refreshing the object.</p>
  <p>I want it to show me the content depends on the 'view detail' button I clicked.</p>
  <p>Can you help me? Thank you (I marked up ❓ on the code for I what I think the issue is so that you can read more easily)</p>
  <pre class="lang-js prettyprint-override"><code>class Note {
      constructor(a,b){
          this.title = a;
          this.body = b;   
      }
  }
  
  submitBtn.addEventListener('click',run);
  
  function run(e) {
      e.preventDefault();
  
      let newNote = new Note(titleInput.value,noteInput.value);❓
           
      addNoteToList(newNote);    
  
      titleInput.value = &quot;&quot; ;
      noteInput.value = &quot;&quot; ;       
  }
  
  function addNoteToList(newNote) {
      let note = document.createElement('div');
      note.classList.add('note_new_container');    
      noteNew.append(note);   
  
      note.innerHTML=    
          &lt;span hidden &gt;${newNote.id}&lt;/span&gt;
          &lt;h2 class=&quot;note_title&quot;&gt;${newNote.title.substring(0,20)}&lt;/h2&gt; 
          &lt;div class=&quot;note_content&quot;&gt;${newNote.body.substring(0,30)}&lt;/div&gt;
          &lt;button class=&quot;myButton2 detail&quot;&gt;view detail&lt;/button&gt;
          &lt;button class=&quot;myButton2 delete&quot;&gt;delete&lt;/button&gt;    
      ;  
  
      noteNew.addEventListener('click', (e) =&gt; {
          if (e.target.classList.contains('detail')) {
              activeModal(newNote);
              modalDetailContainer.classList.add('modal_show');
          }  
      }); 
  }
  
  function activeModal(a) {    
      document.querySelector('.modal_title').innerHTML= ${a.title};❓
      document.querySelector('.modal_content').innerHTML = ${a.body};❓
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/x0C0g.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x0C0g.jpg" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/1rVuv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1rVuv.jpg" alt="enter image description here" /></a></p>