squares.js
function squares() {
  var id=0;
  var s1="<div class='square' id='";
  var s2="'></div>";
  for (var row=0;row<40;row++) {
    document.write("<div class='row'>");
    for (var col=0;col<40;col++) {
      document.write(s1+id+s2);
      id++;
    }
    document.write("</div>");
  }
}
the g_squares array

The project is much easier to create if we have an array behind the scenes which mirrors the grid. It will have 1,600 items. A 0 for a dead cell and a 1 for a live cell. Then we'll have a draw function to show this data on the grid. We'll also need a klear function to clear the grid. No, that's not a typo, clear is a reserved word in JavaScript.

globals.js
var g_squares=[];
functions.js
function klear() {
  for (var i=0;i<1600;i++) g_squares[i]=0;
}
function draw() {
  for (var i=0;i<1600;i++) {
    var el=document.getElementById(i);
    var colour='white';
    if (g_squares[i]==1) colour='red';
    el.style.backgroundColor=colour;
  }
}