As with a certain class on the page, change style of another block?

When clicking on the menu item receives the class .active and goes to the page where there is left directory. It is necessary that when .cat-parent:nth-child(1).active directory class .list-group changed background, for example purple, but if .cat-parent:nth-child(2).active, blue. Is it possible to do?

Here's the menu

ul class="product-categories"> ProductsFood with meaningHousehold chemicalsIonizers AquaspectrBadIdeas

Directory which should change the background

TUPPERWARE Welding equipmentElectrode holders, clampsElectrodesServing Welding equipmentTorches for semi-automaticComponents for burnersWire

There is code but it does not work if there is a transition to the page.

var colorArray = ['blue', 'violet', 'yellow', 'red', 'green', 'grey']; var listGroup = document.getElementById('list-group1'); $('.cat-item').click(function(event) { $('.cat-item').removeClass('active'); $(this).addClass('active'); listGroup.style.background = (colorArray[$(this).index()]); });