my css chessboard

index.html

<div class="board">
  <div class="board-row">
    <div class="square black-even">
      ♜
    </div>
    <div class="square black-odd">
      ♞
    </div>
    <div class="square black-even">
      ♝
    </div>
    <div class="square black-odd">
      ♛
    </div>
    <div class="square black-even">
      ♚
    </div>
    <div class="square black-odd">
      ♝
    </div>
    <div class="square black-even">
      ♞
    </div>
    <div class="square black-odd">
      ♜
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-even">
      ♙
    </div>
    <div class="square white-odd">
      ♙
    </div>
    <div class="square white-even">
      ♙
    </div>
    <div class="square white-odd">
      ♙
    </div>
    <div class="square white-even">
      ♙
    </div>
    <div class="square white-odd">
      ♙
    </div>
    <div class="square white-even">
      ♙
    </div>
    <div class="square white-odd">
      ♙
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-odd">
      ♖
    </div>
    <div class="square white-even">
      ♘
    </div>
    <div class="square white-odd">
      ♗
    </div>
    <div class="square white-even">
      ♕
    </div>
    <div class="square white-odd">
      ♔
    </div>
    <div class="square white-even">
      ♗
    </div>
    <div class="square white-odd">
      ♘
    </div>
    <div class="square white-even">
      ♖
    </div>
  </div>
  <br class="board-row-br" />
</div>

index.js

cols = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
cells = [];

function grab_piece(data) {
  console.log(data.attr('id'));
  if (data.hasClass('selected')) { 
  	data.removeClass('selected');
    return;
  }
  
  data.addClass('selected');
};

$(document).ready(function() {
  counter = 0;
  $('.square').map(function(i, el) {
    if(i % 8 == 0) {
      row = parseInt(i / 8) + 1;
      counter = 0;
    }
    else
      counter++;
     
    var sq = $(el);
    
    sq.attr('id', cols[counter] + "" + row)
    
    sq.append('<span>' + cols[counter] + "" + row + "</span>");
    
    sq.click(function() {
    	grab_piece(sq); 
    });
    
    cells.push(sq);
   
  });
 
});

style.css

.board {
  background-color: black;

}

.board-row {}

.board-row-br {
  clear: both;
}

.square {
  font-size: 72px;
  min-width: 72px;
  min-height: 72px;
  margin: 0;
  padding-left: 0.8%;
  padding-bottom: 0.3%;
  width: 64px;
  height: 64px;
  float: left;
}

.white-even {
  color: white;
  text-shadow: -4px -4px 8px darkgray;
  background: linear-gradient(135deg, lightgray 0%, #f5f7fa 75%);


}

.white-odd {
  color: white;
  text-shadow: 2px 2px 4px darkgray;
  background: linear-gradient(109.6deg, rgba(0, 0, 0, 0.93) 11.2%, rgb(63, 61, 61) 78.9%);


}

.black-even {
  color: black;
  text-shadow: -4px -2px 1px darkgray;
  background: linear-gradient(135deg, lightgray 0%, #f5f7fa 75%);

}

.black-odd {
  color: black;
  text-shadow: 1px -1px 1px white;
  background: linear-gradient(109.6deg, rgba(0, 0, 0, 0.93) 11.2%, rgb(63, 61, 61) 78.9%);

}

.black-odd span {
  visibility: hidden;
}

.black-odd.selected span {
  margin-left: -60px;
  position: absolute;
  visibility: visible;
  font-size: 8px;
  color: white;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  margin-right: 25px;
}


.black-even span {
  visibility: hidden;  
}

.black-even.selected span {
  margin-left: -60px;
  position: absolute;
  visibility: visible;
  font-size: 8px;
  color: black;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  margin-right: 25px;
}


.white-odd span {
  visibility: hidden;
  font-size: 8px;

}

.white-odd.selected span {
  margin-left: -60px;
  position: absolute;
  visibility: visible;
  font-size: 8px;
  color: white;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  margin-right: 25px;
}


.white-even span {
  visibility: hidden;
  font-size: 8px;

}

.white-even.selected span {
  margin-left: -60px;
  position: absolute;
  visibility: visible;
  font-size: 8px;
  color: black;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  margin-right: 25px;
}

demo https://jsfiddle.net/e2nfmxyw/2/