Как сохранить срабатывание MutationObserver при динамическом добавлении HTML

Question

Я упорядочил список, который пользователь может редактировать.Я добавляю дополнительный HTML-код для каждой записи элемента списка.Я использую MutationObserver для этого.Это прекрасно работает, когда у меня есть один список.Однако, если я динамически создаю заголовок и перезапускаю новый список, MutationObserver больше не запускается.

См. fiddle для демонстрации этого.Создайте новые элементы списка, и дополнительный HTML добавляется к каждому элементу при нажатии Enter.Добавьте текст для заголовка и нажмите кнопку «Создать заголовок».Первый список закрыт, заголовок создан и новый список запущен.Тем не менее, html не добавляется ни для каких новых элементов списка ни в одном из списков.

Я попытался отключить наблюдателя и повторно подключиться, но это не работает.

<div><button id="makeHeading">Make Heading</button></div>
<div class='wrapper'>
  <ol contenteditable=true class="editor">
    <li><br></li>
  </ol>
</div>

function subscriber(mutations) {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      const prev = node.previousSibling;
      if (prev && prev.innerHTML !== undefined && prev.tagName === 'LI') {
        prev.innerHTML = prev.innerHTML + "- (additional html)";
      }
    });
  });
}

var observer = new MutationObserver(subscriber);
observer.observe(document.querySelector('ol[contenteditable]'), {
  childList: true,
  subtree: true
});

document.getElementById('makeHeading').addEventListener('click', function(event) {
  event.preventDefault();

  var selection = window.getSelection();
  if (selection.baseNode.parentElement.tagName === 'LI') {

    // dirty way to get DIV for example
    var parent = selection.baseNode.parentElement.parentElement.parentElement;
    var liContent = selection.baseNode.parentElement;
    parent.innerHTML = parent.innerHTML + "<div class='heading'>" + liContent.innerText + "</div><ol contenteditable=true class='editor'><li><br></li></ol>";

    // observer.disconnect();
    // observer.observe(document.querySelector('ol[contenteditable]'), { childList: true, subtree: true });
  }
});

Заранее спасибоза вашу помощь и предложения.