How do I make the child index reset to 0 for each new parent section?

I'm using the index of an item to add an animation delay to elements on my website.

Here's the HTML and JS

<div>
     <div class="section section-1">
          <div class="item item-1">
          </div>
          <div class="item item-2">
          </div>
     </div>
     <div class="section section-2">
          <div class="item item-1">
          </div>
          <div class="item item-2">
          </div>
          <div class="item item-3">
          </div>
          <div class="item item-4">
          </div>
     </div>
</div>

const AnimatedElements = document.querySelectorAll(".section .item");

AnimatedElements.forEach((AnimatedElement, index) => {
	AnimatedElement.style.setProperty('--index-delay', ([index] * 250) + "ms");
});

Now, this does work. However, The issue I am having is the JS reads the item index as one Array (I.E [0, 1, 2, 3, 4, 5]) rather than two separate arrays within their respective sections (I.E section 1 [0, 1], Section 2 [0, 1, 2, 3]).

Is there any way I can make the index reset to 0 for each new section? As otherwise the animation delay just gets longer and longer the further you scroll down the page.

Edit: I've managed to get the issue fix. However, I have now applied the JS to the columns within the section as well as the items and I am now experiencing the same issue as before.

Here's the updated HTML and JS

<div>
     <div class="section section-1">
          <div class="column column-1">
               <div class="item item-1">
               </div>
          </div>
          <div class="column column-2">
               <div class="item item-2">
               </div>
          </div>
     </div>
     <div class="section section-2">
          <div class="column column-1">
               <div class="item item-1">
               </div>
               <div class="item item-2">
               </div>
               <div class="item item-3">
               </div>
          </div>
          <div class="column column-2">
               <div class="item item-4">
               </div>
          </div>
     </div>
</div>

const Sections = document.querySelectorAll(".section");
const Columns = document.querySelectorAll(".section .column");

Columns.forEach(Column => {
	const AnimatedElements = Column.querySelectorAll(".item");
	AnimatedElements.forEach((AnimatedElement, index) => {
		AnimatedElement.style.setProperty('--index-delay', (index * 250) + "ms");
	});
});

Sections.forEach(Section => {
	const AnimatedColumns = Section.querySelectorAll(".column");
	AnimatedColumns.forEach((AnimatedColumn, index) => {
		AnimatedColumn.style.setProperty('--index-delay', (index * 250) + "ms");
	});
});

As said before the issue is doing the exact same thing that it did before where the JS reads the column index as one Array (I.E [0, 1, 2, 3]) rather than two separate arrays within their respective sections (I.E section 1 [0, 1], Section 2 [0, 1]).

Any help to fix this issue would be greatly appreciated. Thanks

Use nested loops. The outer loop is for the sections, the inner loop is for the items. The item indexes will start at 0 in each section.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const sections = document.querySelectorAll(".section");

sections.forEach(section => {
  const AnimatedElements = section.querySelectorAll(".item");
  console.log([...AnimatedElements]);
  AnimatedElements.forEach((AnimatedElement, index) => {
    AnimatedElement.style.setProperty('--index-delay', (index * 250) + "ms");
  });
});

<!-- language: lang-html -->

<div>
  <div class="section section-1">
    <div class="item item-1">1A
    </div>
    <div class="item item-2">1B
    </div>
  </div>
  <div class="section section-2">
    <div class="item item-1">2A
    </div>
    <div class="item item-2">2B
    </div>
    <div class="item item-3">2C
    </div>
    <div class="item item-4">2D
    </div>
  </div>
</div>

<!-- end snippet -->