// View
$(document).ready(function() {
  console.log("Ready!");
  // initialize the game and create a board
  var game = new Game();
  PopulateBoard(game.flattenBoard());

  //Handles clicks on the checkers board
  $(".board").on("click", function(e){
    e.preventDefault();
    game.test(game);

  }) // .board on click, a funciton

}) // end (document).ready


var PopulateBoard = function(board){
  board.forEach(function(value, index){

    if (value == "green"){
      console.log("GREEN");
      console.log(index);
      $(".board").append($.parseHTML('<a href="'+(index+1)+'" id="square'+(index+1)+'" class="green"></a>'));
    } else if (value == "blue"){
      console.log("blue");
      // $(".board").append($.parseHTML('<a href="'+(index+1)+'" id="square'+(index+1)+'" class="blue"></a>'));
    } else if (value == "empty"){
      console.log("Empty");
    }
  })
}

@@ -865,16 +865,97 @@
 );%0A    %7D
+ else %7B%0A      $(%22.board%22).append($.parseHTML('%3Cdiv class=%22null%22%3E%3C/div%3E'));%0A    %7D%0A
 %0A  %7D)%0A%7D%0A

Add else to into populate board to create a div elemento for the not used squares