title: Make a dynamic checkerboard responsive to user input jQuery
body: <p>I'm working on a coding challenge asking me to create a checkerboard using jQuery, along with an input form asking for how big the gameboard will be (i.e. 6x6 board, 7x7 board, etc.). I am having difficulty with odd/even class assignment for  whenever the input is an odd number (i.e. 7x7 board, 9x9 board, 11x11 board). If you run the JS fiddle when increasing input # to any odd number, the odd/even assignment "skips".</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      
    //create input form for number/size of board
    $('h1').append('&lt;div class=div1&gt;Size of Board: &lt;input type="text" id = "size1" name="size2" min = "2" max = "100" step = "2" value = "6"&gt;&lt;input type="submit" id="submit1" value="Create"&gt;&lt;/div&gt;')
   
    //create button to print Game Pieces 
    $('h1').append('&lt;div&gt;&lt;input type="submit" id="submitForm" value="Lets Play!"&gt;&lt;/div&gt;');
    
    
    var z = '';
    //on clicking the button, create array of empty boxes/&lt;td&gt;
    $('#submit1').click(function() {
      var array = [];
      //remove previous appended array
      $('tbody').empty();
  
      //grab current value or size of gameboard
      z = $('#size1').val();
      
        //with a for loop, create "empty" table (z by z) of boxes
        for (var i=0; i&lt;z; i++) {
          //addClass so we can grab later for color assignment
          var trEven = $('&lt;tr&gt;').addClass('trEven');
          var trOdd = $('&lt;tr&gt;').addClass('trOdd');
          //Differentiate between row to row: assign class trEven and trOdd to every other row      
          if (i%2 == 0) {
            array.push(trEven);
          }
          else {
            array.push(trOdd);
          }
          //for each row add z number of td's
            for (var j=0; j&lt;z; j++) {
              array[i].append('&lt;td&gt;&lt;/td&gt;');
            }
        } 
  
      //append updated array to &lt;tbody&gt;
      $('tbody').append(array);
      //select all evens/odds of trOdd/trEven to assign colors using special selectors
      $('.trOdd td:odd').css('background-color', 'black'); 
      $('.trOdd td:even').css('background-color', 'white'); 
      $('.trEven td:odd').css('background-color', 'white');
      $('.trEven td:even').css('background-color', 'black'); 
  
    });//onclick function
    
    
    //Play Button: add game pieces
    $('#submitForm').click(function(){
      if (z &lt;= 6) {
        //first two rows
        $('#gameBoard tr:eq(0) td:odd').append('&lt;div class="gamePiece"&gt;')
        $('#gameBoard tr:eq(1) td:even').append('&lt;div class="gamePiece"&gt;')
        //last two rows
        $('#gameBoard tr:last td:even').append('&lt;div class="gamePiece"&gt;')
        $('#gameBoard tr:nth-last-child(2) td:odd').append('&lt;div class="gamePiece"&gt;')
      }
      else if (z &gt; 6) {
     //first three rows
        $('#gameBoard tr:eq(0) td:odd').append('&lt;div class="gamePiece"&gt;')
        $('#gameBoard tr:eq(1) td:even').append('&lt;div class="gamePiece"&gt;')
        $('#gameBoard tr:eq(2) td:odd').append('&lt;div class="gamePiece"&gt;')
        //last three rows
        $('#gameBoard tr:last td:even').append('&lt;div class="gamePiece"&gt;')
        $('#gameBoard tr:nth-last-child(2) td:odd').append('&lt;div class="gamePiece"&gt;')
        $('#gameBoard tr:nth-last-child(3) td:even').append('&lt;div class="gamePiece"&gt;') 
      }
  
    })//onclick function
    
    
  })//document</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    border: solid 1px black;
    border-spacing: 0px;
  }
  td {
    width: 50px;
    height: 50px;
  }
  .div1 {
    font-size: medium;
  }
  .gamePiece {
    border-radius: 100%;
    height: 100%;
    width: 100%;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Game Board&lt;/h1&gt;
    &lt;table id="gameBoard"&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
    &lt;/table&gt;
    &lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you pull up the inspector tool and click on the 'skipped' row (ex. third row) and compare it to the first row, both rows are recognized as and "even" row, but the first td element differs. The first td/"column" of the Row 1, is being pulled as td:even. However the first td/"column" of the third row is being pulled as td:odd. From my knowledge it seems that after each pair of rows (1 odd row &amp; 1 even row) the indexing skips, the first column is "1" when it should be "0". This only occurs when the board size is odd.  </p>
  
  <p>Does anyone know why the index is being skipped?</p>