table row and column count based on div hover

HTML

<div class="MainDivision">
   <div class="firstrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
     <div class="secondrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
      <div class="secondrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
      <div class="secondrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
</div>

<div class="Value">
    <span id="noOfRow">n</span>
    &nbsp;x&nbsp;
    <span id="noOfColumns">n</span>
</div>

CSS

.row{
  margin-bottom:5px;  
}
.cell{
    width:20px;
    height:20px;
    border:1px solid black;
    display:inline-block;
}
.row:hover .cell:hover{
    background:blue;
}

JavaScript

$('.cell').hover(function(){
    $('.cell').css({background:'#fff'});
    for (var j = 0;j <= parseInt($(this).parent('.row').index());j++ ) {
    for (var i = 0;i <= parseInt($(this).index());i++ ) {
        

    $(this).parents('.MainDivision').find('.row').eq(j).find('.cell').eq(i).css({background:'black'});
        }
    }
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
    $('#noOfColumns').text(parseInt($(this).index())+1);
});