Separate the marked list

[Mystic]

There's a labeled list. We need to break it to groups. In fact, by following the title, add a closing g above it </ul> And then reopen. But, on the way out, we get an addendum before the headline. <ul></ul>♪ How to close and open the list before the class list. heading2 and heading3?

The code added to understand the situation and highlight the current problem:

let formField = document.querySelector('.form-field');
let heading = ['heading2', 'heading3'];
if (formField) {
  let allFields = [...document.querySelectorAll('.form-field')];
  allFields.forEach(el => {
    if (heading.some(heading => el.classList.contains(heading))) {
      el.insertAdjacentHTML('beforebegin', '</ul><ul>');
    }
  });
}

ul {
  border: 1px solid #666;
  padding: 10px;
  list-style: none;
}

<ul>
  <li class="form-field heading1">Heading</li>
  <li class="form-field">1</li>
  <li class="form-field">2</li>
  <li class="form-field">3</li>
  <li class="form-field">4</li>
  <li class="form-field heading2">Heading</li>
  <li class="form-field">5</li>
  <li class="form-field">6</li>
  <li class="form-field">7</li>
  <li class="form-field heading3">Heading</li>
  <li class="form-field">8</li>
  <li class="form-field">9</li>
  <li class="form-field">10</li>
  <li class="form-field">11</li>
  <li class="form-field">12</li>
</ul>

[jeanid]

Change in line with your algorithm https://developer.mozilla.org/ru/docs/Web/API/Element/innerHTML and then replace the parent element.

let ul = (formField = document.querySelector('.form-field')).parentElement;
let heading = ['heading2', 'heading3'];
if (formField) {
    let string = "</ul><ul>";
    let offset = string.length+1;
    let inner = "<ul>"+ul.innerHTML;
    let index = inner.indexOf('<li class="form-field heading', offset);
    while (index > -1) {
        inner = inner.slice(0, index) + string + inner.slice(index);
        index = inner.indexOf('<li class="form-field heading', (index+=offset));
    }
    ul.outerHTML = inner;
}

ul {
  border: 1px solid #666;
  padding: 10px;
  list-style: none;
}

<ul>
  <li class="form-field heading1">Heading</li>
  <li class="form-field">1</li>
  <li class="form-field">2</li>
  <li class="form-field">3</li>
  <li class="form-field">4</li>
  <li class="form-field heading2">Heading</li>
  <li class="form-field">5</li>
  <li class="form-field">6</li>
  <li class="form-field">7</li>
  <li class="form-field heading3">Heading</li>
  <li class="form-field">8</li>
  <li class="form-field">9</li>
  <li class="form-field">10</li>
  <li class="form-field">11</li>
  <li class="form-field">12</li>
</ul>