how to get current value when using arrow keys on keydown event

Question

Im currently stuck trying to find a way to access the current value when moving left or right using the arrow keys on a keydown event.

This is what I am trying to do: I have a table and I want to click on any cell and display it as a pop-up box with information from that cell.

I have it working where overytime I click on any specific cell, it displays the data for that cell. Now, what I am trying to accomplish is to be able to use the arrow keys once the pop up is up and instead of clicking each cell, use the arrow keys to display the values on the pop-up box.

This is what I have so far:

HTML

<div id="alert">
<div id="alert-content"></div>
</div>


<table border="1" id="navigate">
  <tr>
    <td class="alertShow" id="test">row 1, cell 1</td>
    <td class="alertShow" id="test">row 1, cell 2</td>
  </tr>
  <tr>
    <td class="alertShow" id="test">row 1, cell 1</td>
    <td class="alertShow" id="test">row 2, cell 2</td>
  </tr>
  ...
</table> 

Javascript

$(document).ready(function(){$('.alert').hide()});

var active = 0;  
$('#navigate alertShow').each(function(idx){$(this).html(idx);});
rePosition();

//this functions works and does what i want
$('.alertShow').click(function(){
     active = $(this).closest('table').find('td').index(this);
     $('#alert-content').html(this.innerHTML);
     $('#alert').show();
     rePosition();
});

//this function works and closes the popup box
$(document).mouseup(function (e) {
        var popup = $('#alert'); 
  if (!$('#alertShow').is(e.target) && !popup.is(e.target) &&        popup.has(e.target).length == 0) {
            popup.hide();
}});


//unable to get value from current td when using arrow keys
$(document).keydown(function (e) {
    reCalculate(e);
    rePosition();
    $('#alert').show();
    return false;
});

function reCalculate(e){
   var rows = $('#navigate tr').length;
   var columns = $('#navigate tr:eq(0) td').length;

   if (e.keyCode == 37) { //move left or wrap
       active = (active>0)?active-1:active;
   }
   if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
   }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');

}

CSS

#alert{
   border:1px solid #000;
   display:none;
   position:fixed;
   height:100px;
   width:200px;
   left:250px;
}
.back{
   opacity:0.5;
}

td.active{
    border:1px solid blue;font-weight:bold;color:yellow;background-   color:red}
td{padding:5px;text-align:center}

I have been stuck trying to figure out how to get the value for a couple of days now. I think I have something small, but can't seem to get it. Any help will be appreciated.

Thanks