Когда я добавляю новое поле ввода для телефона в мою форму, мне нужно, чтобы оно показывало Телефон 2 .. Телефон 3 и т. Д.

Question

У меня есть форма, в которой есть поле ввода Phone 1. Когда я нажимаю кнопку «Добавить телефон», мне нужно, чтобы оно отображало новое поле ввода, в котором указано «Телефон 2 ... Телефон 3» и т. Д. Я заставлял его работать только с отображением Телефона 2, каждый раз, когда нажимается кнопка, но мой подходне является правильным, так как я считаю, что мне нужно иметь оператор IF, чтобы он мог изменить номер телефона - 2,3,4,5.

function newPhone () {
   var phone = document.querySelector('.phone'); 
   var label = document.createElement('label') ;
   var input = document.createElement('input')
   var span = document.createElement('span')
   span.textContent= 'Phone 2';
   input.setAttribute('type','text')
   input.setAttribute('name', 'phones')
   label.appendChild(span);
   phone.appendChild(label);
   phone.appendChild(input)
}

<form id="form">
    <div class="field">
     <label>First name</label><input type="text">
    </div>
    <div class="field">
     <label>Last name</label><input type="text">
    </div>
    <div class="field">
     <strong>Phones</strong>
     <div id="list-phones">
       <div class="phone">
        <label>Phone <span>1</span></label><input name="phones[]" 
         type="text">
       </div>
      </div>
    </div>
    <button id="add_phone" type="button" onclick="newPhone()">Add 
  phone</button>
</form>

Answer 1

Просто создайте переменную для отслеживания числа. т.е. i здесь.

var i = 1;

function newPhone () {
  i++;
  var phone = document.querySelector('.phone'); 
  var label = document.createElement('label') ;
  var input = document.createElement('input')
  var span = document.createElement('span')
  span.textContent= 'Phone '+i;
  input.setAttribute('type','text')
  input.setAttribute('name', 'phones-'+i)
  label.appendChild(span);
  phone.appendChild(label);
  phone.appendChild(input)
}

<form id="form">
    <div class="field">
     <label>First name</label><input type="text">
    </div>
    <div class="field">
     <label>Last name</label><input type="text">
    </div>
    <div class="field">
     <strong>Phones</strong>
     <div id="list-phones">
       <div class="phone">
        <label>Phone <span>1</span></label><input name="phones-1" 
         type="text">
       </div>
      </div>
    </div>
    <button id="add_phone" type="button" onclick="newPhone()">Add 
  phone</button>
</form>