increment div's value on keydown

increment div's value on keydown

Hi! I would like to increment the value of two divs by one each time a press the left or the right arrow button.
It doesn't work, says
[13:04:50.297] TypeError: this[0].innerHTML is undefined @ http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js:12

  1. <div class="centered">
  2.         <span id='first'>0</span>
  3.         <span id='second'>0</span>
  4.  </div>

  1.  <script>
  2.            $(document).ready(function(){
  3.                 $(document).keydown(function(key) {           
  4.                   switch(parseInt(key.which,10)) {
  5.                   
  6.                    case 37: //left arrow
  7.                         $('#first').html( parseInt($(this).html()) + 1);
  8.                         break;
  9.                    
  10.                   case 39: //right arrow
  11.                          $('#second').html(parseInt($(this).html()) + 1);
  12.                         break;
  13.                    
  14.                   default:
  15.                         break;
  16.                 }
  17.             });
  18.      });
  19. </script>