动态创建的div中mouseover事件中的div加载出的数据总是最有一条 求解答

我用的是json 一共30条数据 在动态创建的的div上用mouseover事件动态创建30个小的div（dvBeauty2）用来显示加载出的div的信息（ jsonLegends.LegendName） 怎么30个都是显示的最后一条数据 求解答！！！
function LoadUlData(jsonArray) {
for (var value = 0; value < jsonArray.length; value++) {
var jsonLegends = jsonArray[value];
dvulObj.innerHTML = dvulObj.innerHTML + "

";
$('#ulLegend li div').css('cursor', 'pointer').mouseover(function () {
var dvBeauty2 = $('');
var dvBeauty2X = $(this).offset().left;
var dvBeauty2Y = $(this).offset().top + $(this).height();
dvBeauty2.css({ 'position': 'absolute', 'left': dvBeauty2X + 'px', 'top': dvBeauty2Y + 'px', 'color': 'White' });
$('body').append(dvBeauty2);
}).mouseout(function () {
$('#dvBeauty2').remove();
});
}
}

说明你不太了解js变量，可以改由闭包获取，或者将值赋给元素，再通过事件获取元素属性值

dvulObj.innerHTML = dvulObj.innerHTML + "

"
var dvBeauty2 = $('');
这是没显示出来的部分 求解答！！！

能不能代码说明一下 谢谢