title: Replacing text with new text when button click
body: <p>I have 3 data in the JSON file and want each data to be displayed 1 by 1 at a single click.The problem is the previous data was'nt replaced by the new data as the button was click. They ended up being side by side (image below). How do i overcome this? Thanks in advance. </p>
  
  <p><a href="https://i.stack.imgur.com/UcyOT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UcyOT.png" alt="enter image description here"></a></p>
  
  <p><strong>JSON FILE</strong></p>
  
  <pre><code>[
    {"quote": "Everyday Is A New Day"},
    {"quote": "Trust Your Guts"},
    {"quote": "All The Best"}
  ]
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;p id="text"&gt;&lt;/p&gt;
  &lt;button id="btn"&gt;GENERATE&lt;/button&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var text = document.getElementById("text");
  var btn = document.getElementById("btn");
  var i=0;
  
  btn.addEventListener("click", function() {
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'data2.json');
    ourRequest.onload = renderHTML;
    ourRequest.send();
  });
  
  function renderHTML(data) {
    var htmlString =data[i].quote;
    i++;
    text.insertAdjacentHTML('beforeend', htmlString);
  };
  </code></pre>