title: Javascript getElementById show div hidden before end loop
body: <p>I'm confused and tired of trying to make it work ... 
  On one page, do a raffle (<code>select SQL</code>) and ride the <code>divs</code> (<code>style.display = none</code>) by echo (<code>PHP</code>). 
  So far so good, each <code>DIV</code> with <code>ID</code>. 
  I have a <code>BUTTON</code> that calls a Javascript function that will show the <code>DIV's</code>. Within this function, place a loop. But the browser only shows the <code>DIV</code> after traversing the loop, even working with the <code>setTimeout</code> function.</p>
  
  <p>EX. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="1"&gt; &lt;/div&gt;
  &lt;div id="2"&gt; &lt;/div&gt;
  &lt;div id="3"&gt; &lt;/div&gt;
  &lt;div id="4"&gt; &lt;/div&gt;
  &lt;div id="5"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>*NOTE: div id is creating depending rows <code>SQL SELECT</code></p>
  
  <pre><code>&lt;button Onclick="ShowDivs(&lt;?php echo $numParticipants ?&gt;)"&gt;Raffle&lt;/button&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>id=1;
  function ShowDivs(participants) {
      do {
          window.document.getElementById(id).style.display = "block";
          delay(1000); 
          alert(); // I need remove this alert
          id ++ ;
      } while (id&lt;=participants);
  } 
  
  function delay(millis){
          var date = new Date();
          var curDate = null;
          do { curDate = new Date(); }
          while(curDate-date &lt; millis);
  }
  </code></pre>
  
  <p>I need each DIV is displayed every 2 seconds. One by one every 2 seconds with a single click on the button Raffle. </p>
  
  <p>Please can someone help me?</p>