Почему дочерние элементы странно удаляются?
children – «живая» коллекция. Поэтому цикл for (let i = 0; i < childrens.length; i++){
  childrens[i].remove();
}удаляет через одного.

Вот, например, вариант: while (childrens.length) {
  childrens[0].remove();
}

Неверно делать const output = form.nextElementSibling; - в будущем могут появиться новые элементы и nextElementSibling будут недействительным, надо получить ссылку на конкретный элемент document.querySelector('.output')
Children сохраняет предыдущее значение и результате получается такой эффект. Подробнее тут
Два варианта как решить

//Удаление дочерних элементов перед заполнением
  let childrens = [...output.children]; 
  childrens.forEach(item => item.remove()) 

//Удаление дочерних элементов перед заполнением
  output.innerHtml = ''