клонирование div
 

Доброе время суток
в JS я почти нульовый, но нужно сделать такую вещь:
существует блок div с формой внутри, и кнопка снизу, при нажатии на которую в HTML должен вставиться такой же блок, но с другими ID, так сказать следующими по очереди

<div class="main" id="0">
                <form class="station" name="mainForm"  method="post" action="#">
                    <div class="line-left">
                    <select name="type" class="type" id="type-0">
			             <option value="null">Тип линии</option>

                      </select>
                      <select name="cross-section" class="cross-section" id="cross-section-0">
			             <option value="null">Сечение</option>

                      </select>
                    </div>
                      <div class="line-right">
                          <input type="text" name="long" id="long-0" value="" placeholder="Длина участка, м">
                           <input type="text" name="beginx" id="begin-0" value="" placeholder="Нагрузка в начале линии, кВт">
                          <input type="text" name="end" id="end-0" value="" placeholder="Нагрузка в конце линии, кВт">
                    </div>
                </form>
        
            </div>
<button class="right-button">Добавить участок</button>

var addButton = document.querySelector(".right-button");
var i = 0;

addButton.addEventListener("click", function (event) {
    event = event || window.event;
    event.preventDefault();
    var mainDiv = document.querySelector("#" + i);
    var newDiv = mainDiv.cloneNode('true');
    mainDiv.parentNode.insertBefore(newDiv, mainDiv.nextSibling);
    newDiv.getElementsById('0').id = i + 1;
    newDiv.getElementsById('type-0').id = "type-" + i + 1;
    newDiv.getElementsById('cross-section-0').id = "cross-section-" + i + 1;
    newDiv.getElementsById('long-0').id = "long-" + i + 1;
    newDiv.getElementsById('begin-0').id = "begin-" + i + 1;
    newDiv.getElementsById('end-0').id = "end-" + i + 1;
});

Откажитесь от id и все станет на много проще.

Дело в том что мне потом полученные данные надо в формулы загонять, и мне надо их как то различать, с нулевого блока, первого и так далее

Коллекции обладают индексами, а объект в коллекции вряд ли имеет уникальную формулу. Кроме того, если обработчики на полях ввода, то можно просто найти родительскую форму, получив у нее всех детей, id для этого совсем не нужен.

PS. Сразу добавлю, что "в формулы", это будет выгоднее обработку расчета делегировать форме, одной общей.

спасибо, я учту

насчет ухода от id

var addButton = document.querySelector(".right-button");
var mainDiv = document.querySelector(".main");

addButton.addEventListener("click", function (event) {
    event = event || window.event;
    event.preventDefault();
    var newDiv = mainDiv.cloneNode(true);
    mainDiv.parentNode.insertBefore(newDiv, mainDiv.nextSibling);
});

результат тот же-не работает

Может все-таки сначала подумать над html структурой? Ведь сразу все формы отправить нельзя, тогда почему их несколько клонировать? Может иметь одну родительскую, в которую и вставлять клонируемые элементы? И потом как и чему отправляется поля?