How to change the style of another block with a certain class on the page?

Question

css

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

Here is the menu

ul class="product-categories">
    <li class="cat-item  active"><a href="#">Продукты</a></li>
    <li class="cat-item"><a href="#">Еда со смыслом</a></li>
    <li class="cat-item"><a href="#">Бытовая химия</a></li>
    <li class="cat-item"><a href="#">Ионизаторы Aquaspectr</a></li>
    <li class="cat-item"><a href="#">Бад</a></li>
    <li class="cat-item"><a href="#">Идеи</a></li>
</ul>

The directory that should change the background

<div class='list-group' id="list-group1">
    <a href='#section10' class='list-group-item' data-toggle='collapse' data-target='#subsection10' >
        TUPPERWARE
    </a>
    <div id='subsection10' class="collapse">
        <a href='#' class='list-group-item small'>Сварочное оборудование</a>
        <a href='#' class='list-group-item small'>Электрододержатели, зажимы</a>
        <a href='#' class='list-group-item small'>Электроды</a>
    </div>
    <a href='#section14' class='list-group-item' data-toggle='collapse' data-target='#subsection14' >
        Сервировка
    </a>
    <div id='subsection14' class="collapse">
        <a href='#' class='list-group-item small'>Сварочное оборудование</a>
        <a href='#' class='list-group-item small'>Горелки для полуавтоматов</a>
        <a href='#' class='list-group-item small'>Комплектующие к горелкам</a>
        <a href='#' class='list-group-item small'>Проволока</a>
    </div>
</div>

There is a 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()]);
});

Answer 1

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

Here is the solution, it might help someone

Answer 2

Where is #list-group1 ?
To another page (i.e. another address)? Or did you mean that the anchor "dives" to the element with this id ?