Расположение формы

Здравствуйте!
Нужна ваша помощь

Имеются 2 формы( 2 форма расположена под 1). У первой формы есть кнопка "Добавить", при нажатии на нее появляется еще одна форма. Проблема заключается в том, что форма накладывается прямо на 2 форму. А как можно сделать, чтобы она вставлялась между ними?

Спасибо огромное за помощь!

Вот что есть на данный момент

HTML

<form id = "form_1">
<label for = "topic"> Тема </label>
<input type="text" id="topic">
</form>

</br>
<input type="button" value="Добавить" id = "KR" />

<form id = "form_2">
<label for = "topic2"> Название мероприятия </label>
<input type="text" class="form-control" id="topic2">
</form>

JS

window.onload = function () {
document.getElementById('KR').onclick = function () {
var form = document.getElementById('form_1');

var newForm = form.cloneNode(true);
document.body.appendChild(newForm);


newForm.style.position = "relative";
newForm.style.left = "650px";
newForm.style.top = "280px";
};
};

0

Elka777, https://jsfiddle.net/bbautvko/1/

1

Спасибо!)

0