title: Javascript Pagination Issue
body: <p>I'm trying to make a simple Javascript pagination function, but I'm having this issue where instead of iterating through the array, it keeps adding new list items to the innerhtml. </p>
  
  <ul>
  <li>I have tried creating an element and appending it to the DOM.  </li>
  <li>I have tried using if/else statements to display the list items I
  want.</li>
  </ul>
  
  <pre><code>&lt;body&gt;
      &lt;div class='result'&gt;&lt;/div&gt;
      &lt;button class="add"&gt;+&lt;/button&gt;
     &lt;script src='pretty.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <pre><code>let dogs =  [
      'goldendoodle',
      'poodle',
      'afghan hound',
      'golden retriever',
      'labrador',
      'chihuahua',
      'pitbull',
      'german shepherd',
      'greyhound',
      'bull terrier'
    ]
    let high = 1;
    let low = 0;
    let result = document.querySelector('.result');
    let add = document.querySelector('.add');
    function Pagination(low,high) {
  
  
      for(var i = 0 ; i &lt; dogs.length;i++) {
          let answer = document.createElement('div');
          answer.classList.add('dogs-dom');
  
          answer.innerHTML = dogs[i];
          result.appendChild(answer);
  
          if(i &gt;= low &amp;&amp; i &lt; high) {
  
                  answer.style.display ='block';
  
  
          } 
          if(i &lt; low || i &gt; high) {
  
              answer.style.display ='none';
          }
  
  
  
  
      }
  
    }
    Pagination(low,high);
    add.addEventListener('click', () =&gt; {
  
        low += 2;
        high += 2;
  
      Pagination(low,high);
    });
  
  
  </code></pre>
  
  <p>When I click the button, I want the next two array items to appear and replace the last two shown.</p>