Дополнительные поля с нумерацией

Question

При клике на "Add new position" нужно, чтобы не только добавлялись инпуты с name, как у предыдущего. Но и шла их нумерация в name. Скажем, у первого name="name", я нажимаю добавить и появляется инпут с name="name-1". Каким способом это делается? HTML разметка:

<form class="main-form" action="send.php" method="post">
    <input type="text" name="nameCompany" placeholder="Name company">
    <input type="text" name="name" placeholder="Contact first name*">
    <input type="text" name="surname" placeholder="Contact last name*">
    <input type="phone" name="phone" placeholder="Phone*" pattern="^[ 0-9]+$">
    <input type="email" name="email" placeholder="E-mail*">

    <div class="main-wrapper">
      <h2>Order content</h2>
      <div class="newCell">
        <input type="textSku" placeholder="sku">
        <input type="textName" placeholder="name">
        <input type="numberQuantity" placeholder="quantity">
      </div>
    </div>
    <div class="button-plus">
      <input type="button" id="add" value="Add new position"></input>
    </div>
    <label for="delivery">Delivery Date:</label>
    <input id="delivery" type="date" placeholder="Delivery date">
    <input type="text" placeholder="Payment method">
    <label for="payment">Date of payment:</label>
    <input id="payment" type="date" placeholder="Date of payment">


    <input type="submit" value="Send">
  </form>

Answer 1

Предлагаю 2 способа, первый предпочтительнее, как по мне:

Необходимо, чтобы все добавляемые теги <input name="name_N" value="" /> были помещены в отдельный контейнер. Тогда в момент генерации нового поля можно считать количество уже добавленных полей и эту цифру конкатенацией добавлять к имени нового поля.
В атрибуте самой кнопки добавления хранить порядковый номер и после каждого добавлении нового поля увеличивать этот счётчик на 1

Answer 2

Просто при клике считаем сколько уже есть инпутов, которые начинаются с name, но думаю можно и классы добавить и по ним считать, а потом к новым инпутам добавлять это значение в название, вот убрал с формы всё кроме name:

$(document).on('click', '#add', function() {
  
  const inputsCounter = $('.main-form').find('input[name^="name"]').length;
  console.log(inputsCounter);
  
  const inputName = 'name-' + inputsCounter;
  $('<input type="text" name="' + inputName + '" value="' + inputName + '" />').appendTo('.inputs');
  console.log(inputsCounter);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="main-form" action="send.php" method="post">
    <input type="text" name="name" placeholder="Contact first name*">
    
    <div class="inputs"></div>

    <div class="button-plus">
      <input type="button" id="add" value="Add new position"></input>
    </div>
    
    <input type="submit" value="Send">
  </form>

Только изменить нужно контейнер, куда это всё вставлять, но и код вставки.

БЛОГ НА HUSL

Дополнительные поля с нумерацией

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