Move next sibling element into previous sibling

I have a poorly formatted sidebar (aside) which I have no control over the structure.

But I want to make it the correct html structure by moving the elements which are supposed to be children into their parent elements.

I want to end up with something that is html valid:

<aside class="sidebar">
 <div class="sidebar-nav">
  <ul>
  <li><a>Title 1</a>
   <ul>
    <li><a>Title 2</a>
    <ul>
     <li><a>Title 3</a>
     ...
     ...
  </ul>
 </div>
</aside>

At the moment this is the html structure I’m working with, and the javascript I’ve got to. I realise at this point the looping of the function is causing it to recursively append the next element into the previous.

However, this means that I end up with so many more iterations.

// -- get the sidebar list
const sidebarList = document.querySelector('div.sidebar-nav > ul');

const reorder = ((list) => {
    const listItems = list.querySelectorAll(':scope li');
    listItems.forEach((element) => {

    // -- last h6 wont have a next sibling
    if (element.nextElementSibling === null) return;

    // -- if it is a second sub heading skip
    if (element.nextElementSibling.tagName !== 'UL') return;

    // -- add into the next element
    element.innerHTML = element.innerHTML + element.nextElementSibling.innerHTML
    });
})(sidebarList);
<aside class="sidebar">
  <div class="sidebar-nav">
    <ul>
      <li><a>Heading level 1</a></li>
      <ul>
        <li><a>Heading level 2</a></li>
        <ul>
          <li><a>Heading level 3</a></li>
          <ul>
            <li><a>Heading Level 4 - 1</a></li>
            <li><a>Heading Level 4 - 2</a></li>
            <ul>
              <li><a>Heading Level 5</a></li>
              <ul>
                <li><a>Heading level 6</a></li>
              </ul>
            </ul>
          </ul>
        </ul>
      </ul>
      <li><a>Heading level 1</a></li>
      <ul>
        <li><a>Heading level 2</a></li>
        <ul>
          <li><a>Heading level 3</a></li>
          <ul>
            <li><a>Heading Level 4 - 1</a></li>
            <li><a>Heading Level 4 - 2</a></li>
            <ul>
              <li><a>Heading Level 5</a></li>
              <ul>
                <li><a>Heading level 6</a></li>
              </ul>
            </ul>
          </ul>
        </ul>
      </ul>
    </ul>
  </div>
</aside>