pixel art maker project jquery

The code is about a webpage that takes grid height and width and creates it by clicking submit and then draw in the grid any shape by choosing the boxes depending on the chosen color. can someone explain to me what is wrong with my javascript code? code pen is here

$('#submit').on('click', function makeGrid(event){
var r = $('#inputHeight').val();
var c = $('#inputWeight').val();
/*var grid = $('table');
var tr = '<tr></tr>';
var td = '<td></td>';*/
  for (var i=0; i<r; i++){
    $('table').append('<tr></tr>');
    for(var j=0; j<c; j++){
      $('tr:last-child').append('<td></td>');
    }
  }
 });

$('table').on('click',' tr td', function(){
$(this).css('background-color',$('colorPicker').val())
});