при событии click появлялся соответствующий блок

           ```

<div class="catalog__content">
                    <div class="catalog-item">
                        <div class="catalog-item__wrapper">
                            <div class="catalog-item__content catalog-item__content_active">
                                <!-- какой-то контент -->
                                <a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
                            </div>
                            <ul class="catalog-item__list">
                              <!-- какой-то контент -->
                                <a href="#" class="catalog-item__back">НАЗАД</a>
                            </ul>
                        </div>
                    </div>
                    <div class="catalog-item">
                        <div class="catalog-item__wrapper">
                            <div class="catalog-item__content catalog-item__content_active">
                                <!-- какой-то контент -->
                                <a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
                            </div>
                            <ul class="catalog-item__list">
                                   <!-- какой-то контент -->
                                <a href="#" class="catalog-item__back">НАЗАД</a>
                            </ul>
                        </div>       
                    </div>
                </div>

есть структура: 2 блока('.catalog-item'), внтури которого есть ещё 2 блока - один активный('.catalog-item__content'), а другой('.catalog-item__list') скрыт и должен появляться при нажатии на ссылку('.catalog-item__link').
Также внутри появившегося блока('.catalog-item__list') есть ссылка('.catalog-item__link'), которая должна возвращать первый блок назад.

есть такая структура на jquery

<pre>
  function toggleSlide(item) {
    $(item).each(function(i) { // для переключения карточек
      $(this).on('click', function(e) {
        e.preventDefault();
        $('.catalog-item__content').eq(i).toggleClass('catalog-item__content_active');
        $('.catalog-item__list').eq(i).toggleClass('catalog-item__list_active');
      })
    });
  };
  toggleSlide('.catalog-item__link');
  toggleSlide('.catalog-item__back');
</pre>

А я хочу переписать на обычный JS

Проблема:
Я сделал переключатель классов, но срабатывает только на первом блоке(catalog-item). А если через forEach пустить, то при клике на ссылку(catalog-item__link) на 2ом блоке(catalog-item), действие происходит на 1ом.

<pre>
const mainContent = document.querySelector ('.catalog-item__content');
const list = document.querySelector('.catalog-item__list');
const trigger = document.querySelectorAll('.catalog-item__link');
const back = document.querySelectorAll('.catalog-item__back'); 

trigger.forEach(item => {
    item.addEventListener('click', (e) => {
        const target = e.target;
        if(target && target.classList.contains('catalog-item__link')) {
            e.preventDefault();
            mainContent.classList.remove('catalog-item__content_active');
            list.classList.add('catalog-item__list_active');
        }
    });
});
back.forEach(item => {
    item.addEventListener('click', (e) => {
        const target = e.target;
        if(target && target.classList.contains('catalog-item__back')) {
            e.preventDefault();
            list.classList.remove('catalog-item__list_active');
            mainContent.classList.add('catalog-item__content_active');
        }
    });
});
</pre>
```

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