Создание элемента с данными из массива при наведении

Итак, есть участок кода, который создает из массива список:

var cartArray = shoppingCart.listCart();
var output = "";
for (var i = 0; i<cartArray.length; i++) {
    output += "<li id='" + cartArray[i].id + "'>" +
    "<div class='preview' style='background-image: url(" + cartArray[i].img + ")'></div>" +
    "<a href='javascript:void(0)' class='delete-item far fa-times-circle' data-name='" + cartArray[i].name + "'></a>" +
    "</li>";
}
$("#panel").html(output);
$("#panel li").hover(
    function() {
// Можно было через атрибуты извлечь как-то так
// var name = $(this).attr("data-name");
// и затем поставить в нужное место кода, без участия массива
        for (var ..........) {
            panel.append( $( "<div class='item transition'><div class='title'>" + cartArray[i].name + "</div><a href='" + cartArray[i].link + "' class='link transition'>More images</a></div><div class='image' style='background-image: url(" + cartArray[i].img + ")'></div>" ) );
        }
    }, function() {
        panel.find(".item").remove();
    }
);

При наведении на сформированный пункт списка мне необходимо вывести блок в котором будут данные из того же массива за пределами ранее созданного списка. Я мог бы прописать для пунктов списка атрибуты и затем с легкостью их извлечь и подставить куда нужно, но, что-то мне подсказывает, что можно это дело сделать проще. Запросив нужные данные из массива сравнивая по ID или порядку в списке.