How to select child element based on parent element using java script query selector

my page multiple element have same class like below

<div>
 <ol class="sample-class">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
 </ol>
 <div class="help">condent 1</div>
</div>
....
</div>
 <ol class="sample-class">
   <li>list1</li>
   <li>list2</li>
   <li>list3</li>
  </ol>
 <div class="help">condent 2</div>
</div

I need to change the help content based on sample-class I js to select the element but it is not working.

let listVal = document.getElementsByClassName('sample-class');
for(let el of listVal) {
 el.offsetParent.getElementsByClassName('help')[0].innerHTML = "my dynamic condent"
}

anyone help me. Thanks

Answer

You can create a new querySelector in the for loop to select the element with the help class/id, you can achieve this by doing the following:

1 By using parentElement

const elements = document.querySelectorAll(".sample-class");
for (const element of elements) {
  element.parentElement.querySelector(".help").innerText = "new text"
}

2 By using sibling selector

const elements = document.querySelectorAll(".sample-class");
for (const element of elements) {
  element.querySelector("~ .help").innerText = "new text"
}