title: how to add a pre made div using javascript on button click
body: <p>I have a webpage that looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/KLJSK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KLJSK.png" alt="enter image description here"></a>
  I want it like that every time the save note is pressed a new card with updated title and description appears on the right. </p>
  
  <p>This is the html code I wrote</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4 rightLine"&gt;
              &lt;h1 class="bottomLine"&gt;Note List&lt;/h1&gt;
              &lt;div class="active-cyan-3 active-cyan-4 mb-4"&gt;
                  &lt;input class="form-control" type="text" placeholder="Search" aria-label="Search"&gt;
              &lt;/div&gt;
              &lt;div id ="cards"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-8"&gt;
              &lt;h1 class="bottomLine"&gt;Note&lt;/h1&gt;
              &lt;div class="active-cyan-3 active-cyan-4 mb-4"&gt;
                  &lt;input class="form-control" id="title" type="text" placeholder="Enter title here" aria-label="Search"&gt;
              &lt;/div&gt;
              &lt;div class="active-cyan-3 active-cyan-4 mb-4 bottomLine"&gt;
                  &lt;textarea class="form-control" id="description" rows="15" placeholder="Enter descirption here"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button type="button" id="removenote" class="btn btn-outline-danger"&gt;Remove Note&lt;/button&gt;
                  &lt;button type="button" id="savenote" class="btn btn-outline-success" onclick="x.saveNote()"&gt;Save Note&lt;/button&gt;
                  &lt;button type="button" id="addnote" class="btn btn-outline-primary" onclick="x.addNote()"&gt;Add Note&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  The card is the one with id=card in the code and that is the thing I want new every-time. </p>
  
  <p>This is the javascript I wrote</p>
  
  <pre><code> class Note {
      constructor(name, description) {
          this.name = name;
          this.description = description;
      }
  }
  
  class NoteComponent {
      constructor() {
          this.listOfNotes = [];
      }
  
      saveNote() {
          let title = document.getElementById("title").value;
          let description = document.getElementById("description").value;
          let currentNote = new Note(title, description);
          this.listOfNotes.push(currentNote);
  
          getCardHTML(this.listOfNotes);
  
          this.listOfNotes.forEach((arrayItem) =&gt; {
              console.log('name is ' + arrayItem.name + ' description is ' + arrayItem.description);
          });
      }
  
      addNote() {
          let title = document.getElementById("title").value = "";
          let description = document.getElementById("description").value = "";
      }
  
  
      filterList(noteList, Query) {}
  }
  
  /*when the specific note card clicked the title and description places will be populated*/
  function showNote(){
      console.log('the onclcik worked fine');
  }
  
  function getCardHTML(arr) {
      let divOfCards = document.getElementById('cards');
      while (divOfCards.firstChild) {
          divOfCards.removeChild(divOfCards.firstChild);
      }
      for (let i = 0; i &lt; arr.length; i++) {
          let div = document.getElementById("cards");
          let anchor = document.createElement("div");
          anchor.className = "list-group-item list-group-item-action flex-column align-items-start";
          let innerDiv = document.createElement("div");
          innerDiv.className = "d-flex w-100 justify-content-between";
          let divHeading = document.createElement("h5");
          divHeading.className = "mb-1";
          divHeading.innerHTML = arr[i].name;
          let divPara = document.createElement("p");
          divPara.className = "mb-1";
          divPara.innerHTML = arr[i].description;
          //anchor.href = "#";
          anchor.onclick = showNote();
  
          innerDiv.appendChild(divHeading);
          anchor.appendChild(innerDiv);
          anchor.appendChild(divPara);
          div.appendChild(anchor);
      }
  }
  
  let x = new NoteComponent();
  </code></pre>
  
  <p>When a new note is saved it appears on the left side. I don't understand how when that card on the left side is clicked that notes title and description occupies the places on the right.</p>