title: How to replace text and letter on click and set Initial text? Javascript
body: <p>How to replace text and content on click and show initial text in this function? My function work when click on A show me A, then when click on B show me A and B. I want when click on B delete A and show me only B, and show initial text example A.</p>
  
  <pre><code>const alphabetHolder = document.querySelector(".alphabet")
  const textHolder = document.querySelector(".second-column-div2")
  const letterHolder = document.querySelector(".letter-holder")
  let arrOfAlphabet = module.data;
  arrOfAlphabet.forEach((letter) =&gt; {
         const p = document.createElement("p")
         p.innerHTML = letter.letter
         alphabetHolder.appendChild(p)
         p.addEventListener('click', () =&gt; {
               const pp = document.createElement("p")
               const span = document.createElement("span")
               pp.innerHTML = letter.text
               span.innerHTML = letter.letter
               textHolder.appendChild(pp)
               letterHolder.appendChild(span)
         }
  </code></pre>
  
  <p>arrOfAlphabet looks like a json: </p>
  
  <pre><code> {
          "id": 1,
          "letter": "A",
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget rutrum estipit, finugiat eget."
      },
      {
          "id": 2,
          "letter": "B",
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      }
  </code></pre>