通过hover控制表格td内容的显示和隐藏

这儿我建立了5个父div，id分别是
box0 box1 box2 box3 box4

和5个子div ， id分别是
personalInfo0 personalInfo1 personalInfo2 personalInfo3 personalInfo4

当我的鼠标移动到box0的时候，我想显示personalInfo0，但不想显示其他的personalInfo。
以此类推，当鼠标移动到boxn的时候，就显示personalInfon。
请问该如何实现...?

下面是我建立表格的关键语句。

for(var i=0;i<len;i++){
    var tempStr="";
 tempStr+="<tr><td>"+tempDaTa[i].id+"</td><td>"+tempDaTa[i].content+"</td><td><div id='box"+i+"'>"+tempDaTa[i].nickname+"<br/>"
                    +"<div id='personalInfo"+i+"' style='display:none'>"+tempDaTa[i].camper+"-"+tempDaTa[i].major+"-"+tempDaTa[i].grade+"</div></div></td></tr>";
        $tbody.append(tempStr); 
        }

jquery代码：

$("div[id^='box']").each(function(index,domEle){
    var _index=index;
    $(this).mouseenter(function(){
        $('#personalInfo'+_index).show();
    });
    $(this).mouseleave(function(){
        $('#personalInfo'+_index).hide();
    })
})

    for (var i = 0; i < len; i++) {
        var tempStr = "";
        tempStr += "<tr><td>" + tempDaTa[i].id + "</td><td>" + tempDaTa[i].content + "</td><td><div id='box" + i + "'>" + tempDaTa[i].nickname + "<br/>"
                           + "<div id='personalInfo" + i + "' style='display:none'>" + tempDaTa[i].camper + "-" + tempDaTa[i].major + "-" + tempDaTa[i].grade + "</div></div></td></tr>";
        $tbody.append(tempStr);
    }

    $('div[id^="box"]').mouseover(function () {
        $('div[id^="personalInfo"]').hide().filter('#personalInfo' + this.id.replace('box', '')).show();
    })