javascript - nested for loop only executing once -

i using javascript , jquery create simple 40x40 grid.

here's nested loop this:

function display_grid() {         browser_grid=''         $visible_grid = $('#grid');          for(i=0;i<40;i++){             $visible_grid.append('<div>');             for(i=0;i<40;i++){                 $visible_grid.append("<div class='square'> </div>");             }             $visible_grid.append('</div>');         } 

i expect create 40 divs each 40 divs inside each 1 of them. browser shows 1 row 40 divs.

<div>     <div class="square></div>     <div class="square></div>     <div class="square></div>     ... </div> 

this want do, forty times. i'm not experienced js, i'm confused why first loop isn't executing 40 times.

you need different variable name inner loop.

function display_grid() {     browser_grid='';     $visible_grid = $('#grid');      for(var i=0; i<40; i++){         $visible_grid.append('<div>');         for(var j=0; j<40; j++){             $visible_grid.append("<div class='square'> </div>");         }         $visible_grid.append('</div>');     } 

edit: added code. note should use var keyword counting variables in for-loops.

what happened in code after 40 inner divs created, counter @ 40 , condition outer loop isn't true longer, exiting code block.