I want to add a class to an element that shares the same data attribute value using vanilla JS. The class is added on `mouseenter`.

My current setup only applies the class on hover to the first element and ignores the rest.

```js
let section = document.querySelector('.section');
let links = document.querySelectorAll('.links a');
let triggerVal;
let linkedVal;

links.forEach(function(link, index) {
  link.addEventListener('mouseenter', function() {
    triggerVal = this.dataset.triggerValue;
    linkedVal = section.dataset.linkedValue;

    if (linkedVal === triggerVal) {
      section.classList.add('is-active');
    } else {
      section.classList.remove('is-active');
    }
  });
});
```

```html
<ul class="links">
  <li>
    <a data-trigger-value="red" href="#">Red</a>
  </li>
  <li>
    <a data-trigger-value="yellow" href="#">Yellow</a>
  </li>
  <li>
    <a data-trigger-value="blue" href="#">Blue</a>
  </li>
</ul>

<div class="wrapper">
  <div class="section" data-linked-value="red">
    <h2>Red</h2>
  </div>
  <div class="section" data-linked-value="yellow">
    <h2>Yellow</h2>
  </div>
  <div class="section" data-linked-value="blue">
    <h2>Blue</h2>
  </div>
</div>
```

Here's a Codepen: <https://codepen.io/abbasarezoo/pen/7378e190ed6ad117faca968b634520b0>

I've got a feeling it's to do with the `.section` element but I've tried a few things and nothing seems to give me what I need.

Any suggestions as to what I need to do to get the rest of the elements working?