Клонирование select с присвоением порядкового name

Question

Есть форма:

<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?

Answer 1

Вот самый простой и рабочий вариант:

var $add = document.getElementsByClassName('add')[0];
$add.addEventListener('click', function(event) {
  var newBlockCount = $('.size').length + 1;
  
  var $sizeBlock = $(".size:first").clone();
  $sizeBlock.find('select').attr('name', 'razmer-' + newBlockCount)
  $sizeBlock.appendTo(".size-wrapper");
  
  var $countBlock = $(".count:first").clone()
  $countBlock.find('input').attr('name', 'count-' + newBlockCount)
  $countBlock.appendTo(".size-wrapper");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

P.S. Но я бы советовал ещё переделать html, у вас там получается дубляж id будет, и сделал бы основной блок, который клонировал бы, без этих :first в селекторах, и тогда для первого элемента можно было бы имена сделать -1 и т.д., но смотрите сами как вам лучше.

БЛОГ НА HUSL

Клонирование select с присвоением порядкового name

Ответы (1 шт):