Думаю в данном случае гораздо быстрее работало бы просто скрытие блока с расширенной информацией или восстановление видимости обратно, а для решения проблемы с одинаковыми именами input-ов выставлять свойство disabled для input-ов невидимой формы в true, а для видимой в false. Если input disabled, то при submit’е его данные на сервер не едут, что и решает проблему с дублированием.

Best, Ed.

В отличие от управления видимостью своством display, в данном случае взаимозаменяемые части HTML документа могут содержать пересекающийся набор input-ов внутри form-ы.

и если не убрать один из div-ов с помощью removeChild, а просто спрятать по display: none, то данные всё-равно будут посылаться на сервер из двух наборов input-ов и поле username прийдёт дважды.

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

В этом случае последняя строка mBlock.parentNode.removeChild(mBlock); в функции не нужна. Но нужно изменить значение ID какому-либо из блоков: исходному или клонированному. Т.е. примерно так:
mBlock.id = “newID”; – для начального блока или
clonedBlock.id = “newID”; – для клонированного.

function replaceBlock() {
var mBlock = document.getElementById(”searchform”);
var newPlace = document.getElementById(”header”);
mBlock.parentNode.removeChild(mBlock);
newPlace.insertBefore(mBlock, newPlace.firstChild);
}