Вывести изображения категории при наведении на категорию или товар в выпадающем навигационном меню
Есть выпадающие меню в виде раздельных блоков, где последний блок отвечает за вывод соответствующей изображения-ссылки, при наведении на соответствующую категорию или товар.

Если с основными 3 категориями справился, то с остальными возникли проблемы. Вот код который выводит изображение основных 3 категорий и пытается сделать то же с другими(неудачнчо)
var $menuPromoLinks = $('.menu-drop-promo .catalog-link');
var $menuPromoLinks2 = $('.menu-drop-promo .catalog-link2');
$('.header-category-list__item').on('mouseover', function (e) {
var currentId = $(this).index();
$menuPromoLinks.removeClass('active');
$($menuPromoLinks[currentId]).addClass('active');
});
$('.header-drop-menu__item').on('mouseover', function (e) {
var currentId = $(this).index();
$menuPromoLinks.removeClass('active');
$menuPromoLinks2.removeClass('active');
$($menuPromoLinks2[currentId]).addClass('active');
});
и верстка самих изображений
<div class="header-menu-drop__col"></div>
<div class="header-menu-drop__col"></div>
<div class="header-menu-drop__col">
<div class="menu-drop-promo">
<a href="[[~2]]" class="catalog-link ">
<span class="catalog-link__plus"><span class="icon-plus2"></span></span>
<span class="catalog-link__pic" style="background-image: url(/assets/img/media_video_1.jpg)"></span>
<span class="catalog-link__name">[[*context_key:is=`web`:then=`Транспорт` :else=`Transport`]]</span>
</a>
<a href="[[~31]]" class="catalog-link">
<span class="catalog-link__plus"><span class="icon-plus2"></span></span>
<span class="catalog-link__pic" style="background-image: url(/assets/img/container.jpg)"></span>
<span class="catalog-link__name">[[*context_key:is=`web`:then=`Оборудование` :else=`equipment`]]</span>
</a>
<a href="[[~3]]" class="catalog-link">
<span class="catalog-link__plus"><span class="icon-plus2"></span></span>
<span class="catalog-link__pic" style="background-image: url(/assets/img/convertik.jpg)"></span>
<span class="catalog-link__name">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
</a>
<a href="[[~3]]" class="catalog-link2">
<span class="catalog-link__plus2"><span class="icon-plus2"></span></span>
<span class="catalog-link__pic2" style="background-image: url(/assets/img/partner_1.png)"></span>
<span class="catalog-link__name2">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
</a>
<a href="[[~3]]" class="catalog-link2">
<span class="catalog-link__plus2"><span class="icon-plus2"></span></span>
<span class="catalog-link__pic2" style="background-image: url(/assets/img/convertik.jpg)"></span>
<span class="catalog-link__name2">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
</a>
<a href="[[~3]]" class="catalog-link2">
<span class="catalog-link__plus2"><span class="icon-plus2"></span></span>
<span class="catalog-link__pic2" style="background-image: url(/assets/img/convertik.jpg)"></span>
<span class="catalog-link__name2">[[*context_key:is=`web`:then=`Преобразователи` :else=`Converters`]]</span>
</a>
</div>
</div>
Код на jQuery, потому что изначально почти весь сайт был на нем, а так приветствую любые форматы решения. Код и верстка были изначально, поэтому не я был инициатором данного способа и объяснить логику не смогу. Если есть дополнительные вопросы, с радостью отвечу. Подскажите как можно быстро решить проблему?