I am trying to make a chess game and is really just starting to learn jquery. I have a 8\*8 board made and I'm trying to add a rook to its starting position in the bottom right, how can I do this?
I tried making a css for the image and add as id. 

HTML

 chess

```
<h1> Game Board </h1>
<table id="gameBoard">
<tbody></tbody>
</table>
<img id="whiterook">
</img>
<footer>
This is an example of creating a chess Game.
</footer>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/chess.js"></script></body>
</html>

```

JS

```
$(function() {

 var row = new Array(9).join('<td></td>');
 var body = new Array(9).join('<tr>' + row + '</tr>');

 });

```

CSS

```
#gameBoard {
 border-collapse: collapse;
 border: solid 1px black;
}
#gameBoard td {
  width: 50px;
  height: 50px;
}
#gameBoard tbody tr:nth-child(2n+1) td:nth-child(2n) {
  background-color: black;
}
#gameBoard tbody tr:nth-child(2n+2) td:nth-child(2n +1) {
  background-color: black;
}
#whiterook{
background-image: url(../images/Chess_tile_rl.png);
width: 40px;
height: 40px;
top:300px;
}

```