Есть форма:
<form action="" id="form-calc">
<div class="row size-wrapper">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 size">
<h6>Выберите размер</h6>
<select id="size" class="form-control form__custom" name="razmer">
<option value="60x85" data-width="60" data-height="85" selected>60x85</option>
<option value="85x150">85x150</option>
<option value="85x300">85x300</option>
<option value="115x200">115x200</option>
<option value="115x240">115x240</option>
<option value="115x300">115x300</option>
<option value="115x400">115x400</option>
<option value="150x200">150x200</option>
<option value="150x300">150x300</option>
<option value="150x400">150x400</option>
<option value="150x600">150x600</option>
</select>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 count">
<h6>Укажите количество</h6>
<input type="number" id="count" class="form-control form__custom" placeholder="Количество" required name="count">
</div>
</div>
<div class="calc__info-btn">
<button type="button" class="btn btn__custom-green btn_o add">Добавить размер</button>
<button type="button" class="btn btn__custom-green" data-toggle="modal" data-target="#calc-modal" id="counts"> Рассчитать</button>
</div>
</form>
Есть скрипт который копирует выпадающий список и input:
var $add = document.getElementsByClassName('add')[0];
$add.addEventListener('click', function(event) {
$(".size:first").clone().appendTo(".size-wrapper");
$(".count:first").clone().appendTo(".size-wrapper");
});
Как сделать, чтобы name="razmer" и name="count" копировалось как name="razmez-2" и name="count-2" соответвенно? И при последующих нажатиях на кнопку "Добавить Размер" был порядковый номер у полей name?