Based on these 2 examples:
[jQuery: Change the border color of ONE table cell](https://stackoverflow.com/questions/4936547/jquery-change-the-border-color-of-one-table-cell) &
[Getting td by index with jQuery](https://stackoverflow.com/questions/6139407/getting-td-by-index-with-jquery); 

I try to select table cell and then unselect the previous one but the result is 
that I only select the cell without unselecting it. 

```
 var prevCol = -1;
     var prevRow = -1;
     $("#tbl_menu").on("click", "td" ,function () {
         var col = $(this).parent().children().index($(this));
          var row = $(this).parent().parent().children().index($(this).parent());

          //alert('Row: ' + row + ', Column: ' + col);
          $(this).toggleClass('selected');
           console.log("col"+col );
            console.log("prevCol"+prevCol );
          if(prevCol>-1)
          {
            console.log("ssss");
            var c = $('#tbl_menu tr').eq(prevRow).find('td').eq(prevCol).toggleClass('selectedOut');
            c.toggleClass('selectedOut');
          }
          prevCol = col;
          prevRow = row;
     });

```

and the table :

```
<table  id="tbl_menu" border="1" width="180px" >
 <tr>
    <td bgcolor="#FF6500">&nbsp;</td>
    <td bgcolor="#F4D7D7">&nbsp; </td>
    <td bgcolor="#F4D7D7">Coin</td>
    <td bgcolor="#F4D7D7">Gate</td>
    <td bgcolor="#F4D7D7">Coin Wall</td>
    <td >&nbsp; </td>
    <td >&nbsp; </td>
    <td >&nbsp; </td>

</tr>
</table>

```

and the styles

```
<style>
table{
    border: 1px solid black;
    table-layout: fixed;
    width: 180px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 30px;
    hight: 30px;
}

td.selected { border: 3px solid #F00; }
td.selectedOut { border: 3px solid #F22; }
</style>

```

What am I doing wrong here?