How to use JavaScript to set an attribute if a condition exists?

In the snippet below, I’m creating an array of all panels and all links within those panels.

Then, for each panel with the class of active, I want all the links to be set to tabindex="0". For all other links, I want tabindex="-1".

In my example, I don’t understand why all links are set to tabindex="-1", when one of the panels has the active class. Why isn’t it set to tabindex="0"?

const panels = document.querySelectorAll('.panel');
const links = document.querySelectorAll('.panel a');
panels.forEach(function(panel) {
  if (panel.classList.contains('active')) {
    Array.prototype.forEach.call(links, link => link.setAttribute('tabindex', '0'))
  } else {
    Array.prototype.forEach.call(links, link => link.setAttribute('tabindex', '-1'))
  }
})

<div class="panels">
  <div class="panel active">
    <p>Hello <a href="#">World</a>. I am <a href="#">with</a> you.</p>
  </div>
  
  <div class="panel">
    <p>Hello <a href="#">World</a>. I am <a href="#">with</a> you.</p>
  </div>  
</div>