Добавляя новые поля в форму, имя свойства остается прежним

Question

Я пытаюсь сделать функцию добавления другого владельца машины.Для этого мне нужны две функции, одна для дополнительных полей и вторая для удаления этих полей.Моя форма состоит из двух наборов полей, один для автомобиля, а другой для владельца автомобиля.Мне нужно клонировать и вставить div с id="formCarOwner", но я также должен изменить свойство name.Мое решение клонировать узел этого div и добавить число для подсчета форм не работает, потому что оно только добавляет новые поля и не меняет name свойство.

formCounter = 1;

function addFields() {
  formCounter++;
  const formCarOwner = document.getElementById('formCarOwner');
  let formCarOwnerCopy = formCarOwner.cloneNode(true);
  formCarOwnerCopy.id += formCounter;

  for (i = 1; i < formCarOwnerCopy.childNodes.length; i += 2) {
    let formElements = formCarOwnerCopy.childNodes[i].querySelectorAll('input, select');

    for (let newElement of formElements) {
      formCarOwnerCopy.childNodes[i].name = newElement.name + formCounter;
    }
  }
  formCarOwner.parentNode.insertBefore(formCarOwnerCopy, formCarOwner);
}

var btn = document.getElementById('addFields')
btn.addEventListener('click', addFields)

<form name="form" method="post" id="forming">
  <div id="formCar" class="">
    <div><label class="lab required" for="form_brand">Marka samochodu</label><input type="text" id="form_brand" name="form[brand]" required="required"></div>
    <div><label class="lab required" for="form_model">Model</label><input type="text" id="form_model" name="form[model]" required="required"></div>
    <div><label class="lab required" for="form_engineCapacity">Pojemność silnika(cm^3)</label><input type="text" id="form_engineCapacity" name="form[engineCapacity]" required="required"></div>
    <div><label class="lab required">Data pierwszej rejestracji</label>
      <div id="form_firstRegistration">
        <select id="form_firstRegistration_year" name="form[firstRegistration][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_firstRegistration_month" name="form[firstRegistration][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_firstRegistration_day" name="form[firstRegistration][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
    <div><label class="lab required" for="form_meterStatus">Stan licznika</label><input type="text" id="form_meterStatus" name="form[meterStatus]" required="required"></div>
    <div><label class="lab required" for="form_vinNumber">Numer VIN(nadwozia)</label><input type="text" id="form_vinNumber" name="form[vinNumber]" required="required"></div>
    <div><label class="lab required" for="form_isForeign">Sprowadzony z zagranicy:</label><input type="checkbox" id="form_isForeign" name="form[isForeign]" required="required" value="1"></div>
  </div>

  <div class="" id="formCarOwner">
    <div><label class="lab required" for="form_name">Imie i nazwisko</label><input type="text" id="form_name" name="form[name]" required="required"></div>
    <div><label class="lab required" for="form_pesel">PESEL</label><input type="number" id="form_pesel" name="form[pesel]" required="required"></div>
    <div><label class="lab required" for="form_adress">Adres miejsca zarejestrowania pojazdu</label><input type="text" id="form_adress" name="form[adress]" required="required"></div>
    <div><label class="lab required" for="form_postalCode">Kod pocztowy</label><input type="text" id="form_postalCode" name="form[postalCode]" required="required"></div>
    <div><label class="lab required">Data uzyskania prawa jazdy</label>
      <div id="form_drivingLicence">
        <select id="form_drivingLicence_year" name="form[drivingLicence][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_drivingLicence_month" name="form[drivingLicence][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_drivingLicence_day" name="form[drivingLicence][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
  </div>

  <input type="button" id="addFields" value="+">
  <input type="button" id="removeFields" value="-" style="display: none;">
  <input type="submit">
</form>

Answer 1

Нет необходимости в двух циклах, вы можете перебирать новые поля копирования формы, используя foreach, например:

formCarOwnerCopy.querySelectorAll('input, select').forEach(function(field) {
    field.name += formCounter;
});

Хотя вы просто не можете добавить число к своему имени при использованиимассивы.Метод будет использовать RegEx и подставить в текущий индекс:

field.name = field.name.replace(/form/, 'form[' + formCounter + ']');

formCounter = 1;

function addFields() {
  formCounter++;
  const formCarOwner = document.getElementById('formCarOwner');
  let formCarOwnerCopy = formCarOwner.cloneNode(true);
  formCarOwnerCopy.id += formCounter;

  formCarOwnerCopy.querySelectorAll('input, select').forEach(function(field) {
    field.name = field.name.replace(/form/, 'form[' + formCounter + ']');
  });

  formCarOwner.parentNode.insertBefore(formCarOwnerCopy, formCarOwner);
}

var btn = document.getElementById('addFields')
btn.addEventListener('click', addFields);

<form name="form" method="post" id="forming">
  <div id="formCar" class="">
    <div><label class="lab required" for="form_brand">Marka samochodu</label><input type="text" id="form_brand" name="form[brand]" required="required"></div>
    <div><label class="lab required" for="form_model">Model</label><input type="text" id="form_model" name="form[model]" required="required"></div>
    <div><label class="lab required" for="form_engineCapacity">Pojemność silnika(cm^3)</label><input type="text" id="form_engineCapacity" name="form[engineCapacity]" required="required"></div>
    <div><label class="lab required">Data pierwszej rejestracji</label>
      <div id="form_firstRegistration">
        <select id="form_firstRegistration_year" name="form[firstRegistration][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_firstRegistration_month" name="form[firstRegistration][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_firstRegistration_day" name="form[firstRegistration][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
    <div><label class="lab required" for="form_meterStatus">Stan licznika</label><input type="text" id="form_meterStatus" name="form[meterStatus]" required="required"></div>
    <div><label class="lab required" for="form_vinNumber">Numer VIN(nadwozia)</label><input type="text" id="form_vinNumber" name="form[vinNumber]" required="required"></div>
    <div><label class="lab required" for="form_isForeign">Sprowadzony z zagranicy:</label><input type="checkbox" id="form_isForeign" name="form[isForeign]" required="required" value="1"></div>
  </div>

  <div class="" id="formCarOwner">
    <div><label class="lab required" for="form_name">Imie i nazwisko</label><input type="text" id="form_name" name="form[name]" required="required"></div>
    <div><label class="lab required" for="form_pesel">PESEL</label><input type="number" id="form_pesel" name="form[pesel]" required="required"></div>
    <div><label class="lab required" for="form_adress">Adres miejsca zarejestrowania pojazdu</label><input type="text" id="form_adress" name="form[adress]" required="required"></div>
    <div><label class="lab required" for="form_postalCode">Kod pocztowy</label><input type="text" id="form_postalCode" name="form[postalCode]" required="required"></div>
    <div><label class="lab required">Data uzyskania prawa jazdy</label>
      <div id="form_drivingLicence">
        <select id="form_drivingLicence_year" name="form[drivingLicence][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_drivingLicence_month" name="form[drivingLicence][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_drivingLicence_day" name="form[drivingLicence][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
    <hr>
  </div>

  <input type="button" id="addFields" value="+">
  <input type="button" id="removeFields" value="-" style="display: none;">
  <input type="submit">
</form>