Измените содержимое в соответствии с выбранным элементом

Question

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

<div class='item1'>
<img>
</div>

<div class='item2'>
<img>
</div>

<div class='contentItem1'>
</div>
<div class='contentItem1'>
</div>
<div class='contentItem1'>
</div>

<div class='contentItem2'>
</div>
<div class='contentItem2'>
</div>
<div class='contentItem2'>
</div>

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

Любая помощь будет принята с благодарностью

Изменить:

Я должен был добавить больше информации о том, как именно выглядит структура:

@foreach($items as $key => $item)
    <div data-id="{{$key}}" class="mainItem item{{key}}">
        <img>
    </div>
@endforeach

После этого несколько блоков содержимого будут сгенерированы для каждого основного элемента:

@foreach($items as $key => $item)
  <div class="contentBlock{{key}}" id="contentBlock">
    <p>Content</p>
  </div>

  <div class="contentBlock{{key}}" id="contentBlock">
    <p>Content</p>
  </div>

  <div class="contentBlock{{key}}" id="contentBlock">
    <p>Content</p>
  </div>
@endforeach

Надеюсь, это имеет смысл. Что я хотел бы здесь сделать: после открытия страницы видно только содержимое элемента 1, однако после щелчка элемента 2 его содержимое становится видимым, но элемент 1 скрывается.