I am working on some functionality where is user clicks a button it shows some "sub data" below a parent div. The markup looks similar to this,

<div class="row row-parent row-parent-index-1" style="top:20px">I am a parent (1)</div>
<div class="row" data-top="40px">I am a child (1)</div>
<div class="row" data-top="60px">I am a child (2)</div>
<div class="row" data-top="80px">I am a child (3)</div>
<div class="row row-parent row-parent-index-1" style="top:40px">I am a parent (2)</div>
<div class="row" data-top="top:40px">I am a child (1/2)</div>
<div class="row" data-top="top:60px">I am a child (2/2)</div>
<div class="row" data-top="80px">I am a child (3/2)</div>

Currently I have it working so that if a user clicks the row .row-parent-index-1 it takes the data-top attribute of all the elments between .row-parent-index-0and.row-parent-index-1and changes the top position to match that of thedata-top` the problem I need to reflect the change in all elements other wise I am going to get overlapping elements, if there a way to reposition absolute elements based on another elements position?

i.e if the element at index of 4 in the dom has top position of 80, we need to move all the following elements down 80px too?

Here is my attempt,

this.rowEl.addEventListener('click', (event) => {
    const target = event.currentTarget as HTMLElement;
    if(target.classList.contains("datagrid-parent-expanded")) {
      target.classList.remove('datagrid-parent-expanded');
    } else {
      target.classList.add('datagrid-parent-expanded');
      const indexOfCurrParent:any = parseInt(`${target?.dataset?.parentIndex}`);
      const targetClassList = target.classList.value;
      const siblings = helpers.nextUntil(document.querySelector(`.datagrid-main .datagrid-row-parent-index-${indexOfCurrParent}`), `.datagrid-main .datagrid-row-parent-index-${indexOfCurrParent+1}`);
      for (let rowIndex = 0; rowIndex < siblings.length; rowIndex++) {
        let currRow = siblings[rowIndex];
        currRow.style.setProperty("top", `${currRow.dataset.top}`);
        currRow.classList.add('datagrid-parent-expanded');
      }
      const nextSibling = siblings.pop().snextElementSibling as HTMLElement;
      const nextSiblingPosition = nextSibling.dataset.top!;
      nextSibling.style.top = parseInt(nextSiblingPosition, 10) + 20 + "px";
    }
  });

What I am trying to here is get the last element from the nextUntil function and take it's siblings position and add on the appropriate difference?