Верстальщика макетов или HTML верстальщика?
Для HTML вообще не важно, главное красивый и качественный код
А если как дизайнера, то слишком просто и однообразно, повторяющиеся по дизайну блоки, простые формы. Нужно что-нибудь поинтереснее)

1 - Нужно семантически верно сверстать блоки и не будет таких проблем - внутри ссылки не должно быть каких-то интерактивных элементов
2 - Проверил preventDeafault всё отработало

Конструктор никогда не убьет вёрстку, ввиду своей ограниченности, чистый код всегда актуален. В макеты всегда нужно вносить правки, а без знания верстки тут не обойтись.

В ВК в мобильной версии на телефоне нет возможности свайпом увеличить масштаб.
Значит какой-то способ есть

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

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

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