title: Target this Parent's Children only in Vanilla JavaScript
body: <p>I've multiple Parents with the same class <code>(.wowParent)</code> on the same page. With my current code it doesn't target exclusively the current Parent's Children but also those of the other <code>(.wowParent)</code>... I need it to add delay only on Child of current Parent in Vanilla JavaScript but I can't figure out how to do it</p>
  
  <p>Here's a <a href="https://jsfiddle.net/Apache349089/om4cyf12/" rel="nofollow noreferrer">Fiddle</a> "better" explaining the problem</p>
  
  <pre><code>&lt;div class="wowParent"&gt;
      &lt;div class="wow"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div class="wow"&gt;&lt;/div&gt;
      &lt;div class="wow"&gt;&lt;/div&gt;
      &lt;div class="wow"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my current code:</p>
  
  <pre><code>// delay the next element by 100ms
  var delay = 0;
  const array = document.querySelectorAll(".wowParent .wow");
  for (let index = 0; index &lt; array.length; index++) {
      delay = delay + 100; // delay by 100ms
      index += 0;
      // reset loop every 4
      if(index % 4 == 0) { delay = 0; }
      array[index].style.setProperty('--delay', delay + "ms");
  }
  </code></pre>