title: Unable to print items from two arrays in intervals
body: <p>So I have two arrays with the same number of items in each of them. I have been trying to print those items in intervals in the console. Something like this:</p>
  <pre><code>1
  Bruce Wayne
  45
  </code></pre>
  <p>Then after a one second interval it will print:</p>
  <pre><code>2
  Clark Kent
  43
  
  
  and so on till the last item. 
  </code></pre>
  <p>It will stop when all the items have been printed.</p>
  <p>Right now I get something like this:</p>
  <pre><code>1
  Clark Kent
  43
  
  
  3
  undefined
  </code></pre>
  <p>So here is the code I tried:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const superheroes = [
      {
          "name": "Bruce Wayne",
          "age": 45
      },
      {
          "name": "Clark Kent",
          "age": 43
      },
      {
          "name": "Oliver Queen",
          "age": 41
      },
      ,
      {
          "name": "Barry Allen",
          "age": 25
      }
  ];
  
  const arr = [
      '1',
      '2',
      '3',
      '4'
  ];
  const startBtn = document.querySelector('#start');
  let index                       = 0;
  
  
  $(startBtn).click(() =&gt; {
          const interval = setInterval(() =&gt; {
              const arrItem       = arr[index++];
              const superheroItem = superheroes[index++];
              
              console.log(arrItem);
              console.log(superheroItem);
  
              if(index == arr.length){
                  clearInterval(interval);
              }
          }, 1000);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="start"&gt;Start&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I fix it?</p>