title: Difference between interpreting "for" loop in php and javascript
body: <p>sorry for my bad english.</p>
  
  <p>I've got such a question: why the first code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body { position: relative; }
        table { position: absolute; top: 200px; left: 200px; }
        div { width: 100px; height: 100px; background-color: black; margin: auto auto; }
      &lt;/style&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function(){
        for(i = 0; i &lt; 100; i++) {
          var j = i + '';
          $("#menu_div_" + j).mouseover(function(){
            $("#menu_div_" + j).clearQueue();
            $("#menu_div_" + j).stop();
            $("#menu_div_" + j).animate({
              width: 150,
              height: 150
            }, 600
            );
          });
          $("#menu_div_" + j).mouseout(function(){
            $("#menu_div_" + j).clearQueue();
            $("#menu_div_" + j).stop();
            $("#menu_div_" + j).animate({
              width: 100,
              height: 100
            }, 600
            );
          });
        }
      });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table id="menu"&gt;
  &lt;? for($i = 0; $i &lt; 10; $i++) { ?&gt;
        &lt;tr&gt;
  &lt;?   for($j = 0; $j &lt; 10; $j++) { ?&gt;
          &lt;td&gt;
            &lt;div id="menu_div_&lt;? echo ($i * 10) + $j; ?&gt;"&gt;
            &lt;/div&gt;
          &lt;/td&gt;
  &lt;?   } ?&gt;
        &lt;/tr&gt;
  &lt;? } ?&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>doesn't work exactly the same like in this code ("for" loop is written in php):</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body { position: relative; }
        table { position: absolute; top: 200px; left: 200px; }
        div { width: 100px; height: 100px; background-color: black; margin: auto auto; }
      &lt;/style&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function(){
  &lt;?php for($i = 0; $i &lt; 100; $i++) { ?&gt;
          $("#menu_div_" + &lt;?php echo $i; ?&gt;).mouseover(function(){
            $("#menu_div_" + &lt;?php echo $i; ?&gt;).clearQueue();
            $("#menu_div_" + &lt;?php echo $i; ?&gt;).stop();
            $("#menu_div_" + &lt;?php echo $i; ?&gt;).animate({
              width: 150,
              height: 150
            }, 600
            );
          });
          $("#menu_div_" + &lt;?php echo $i; ?&gt;).mouseout(function(){
            $("#menu_div_" + &lt;?php echo $i; ?&gt;).clearQueue();
            $("#menu_div_" + &lt;?php echo $i; ?&gt;).stop();
            $("#menu_div_" + &lt;?php echo $i; ?&gt;).animate({
              width: 100,
              height: 100
            }, 600
            );
          });
  &lt;?php } ?&gt;
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table id="menu"&gt;
      &lt;? for($i = 0; $i &lt; 10; $i++) { ?&gt;
        &lt;tr&gt;
      &lt;?   for($j = 0; $j &lt; 10; $j++) { ?&gt;
          &lt;td&gt;
            &lt;div id="menu_div_&lt;? echo ($i * 10) + $j; ?&gt;"&gt;
            &lt;/div&gt;
          &lt;/td&gt;
      &lt;?   } ?&gt;
        &lt;/tr&gt;
      &lt;? } ?&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Quick explanation:</p>
  
  <p>In the first one, "events" from all "div" tags result in changing the size of the last element (I don't know why). In the second - "event" from each "div" results in changing size of the same "div" (what, in my opinion, should also happen in the first code too).</p>
  
  <p>How can I correct first code to make it work like the second one?</p>