Вложенное поле формы с Jquery

Question

У меня есть форма, в которую я загружаю вложенные поля. Он работает нормально, если у меня есть только один div fields, но если у меня есть 2 из них для различных типов полей формы, он удваивает запрос и добавляет 2 поля вместо 1. Я попытался использовать функцию .closest, но она не работает на все

вот что у меня есть

  $('form').on('click', '.add_fields', function(event) {
    $(event.target).closest('.nested-form'), function(e) { 
      var regexp, time;
      time = new Date().getTime();
      regexp = new RegExp($(this).data('id'), 'g');
      $('.fields').append($(this).data('fields').replace(regexp, time));
      return e.preventDefault();
    };
  });

тогда внутри моей формы

<div class="nested-form">
  <div class="fields">
    <div class="form-group">
      <select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
        <option value="Musicians">Musicians</option>
        <option selected="selected" value="Acting">Acting</option>
        <option value="Modeling">Modeling</option>
        <option value="DJs">DJs</option></select>
    </div>
  </div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name=&quot;user[talent_genres_attributes][70350559861960][genre]&quot; id=&quot;user_talent_genres_attributes_70350559861960_genre&quot;><option value=&quot;Musicians&quot;>Musicians</option><option value=&quot;Acting&quot;>Acting</option><option value=&quot;Modeling&quot;>Modeling</option><option value=&quot;DJs&quot;>DJs</option></select><input as=&quot;hidden&quot; type=&quot;hidden&quot; value=&quot;false&quot; name=&quot;user[talent_genres_attributes][70350559861960][_destroy]&quot; id=&quot;user_talent_genres_attributes_70350559861960__destroy&quot; /><a class=&quot;remove_record btn btn-danger&quot; href=&quot;#&quot;>Delete</a></div></fieldset>" href="#">Add Genres</a>

<div class="nested-form">
  <div class="fields">
    <div class="form-group">
      <select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
       <option selected="selected" value="Musicians">Musicians</option>
       <option value="Acting">Acting</option>
       <option value="Modeling">Modeling</option>
       <option value="DJs">DJs</option></select>
    </div>
  </div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name=&quot;user[talent_locations_attributes][70350580425060][location]&quot; id=&quot;user_talent_locations_attributes_70350580425060_location&quot;><option value=&quot;Los Angeles&quot;>Los Angeles</option><option value=&quot;Chicago&quot;>Chicago</option><option value=&quot;Detroit&quot;>Detroit</option><option value=&quot;Miami&quot;>Miami</option><option value=&quot;New York&quot;>New York</option><option value=&quot;San Francisco&quot;>San Francisco</option></select><input as=&quot;hidden&quot; type=&quot;hidden&quot; value=&quot;false&quot; name=&quot;user[talent_locations_attributes][70350580425060][_destroy]&quot; id=&quot;user_talent_locations_attributes_70350580425060__destroy&quot; /><a class=&quot;remove_record btn btn-danger&quot; href=&quot;#&quot;>Delete</a></div></fieldset>" href="#">Add Locations</a>

Кстати, это версия, которая была у меня до того, что добавлены поля в оба .fields div контейнера

  $('form').on('click', '.add_fields', function(event) {
      var regexp, time;
      time = new Date().getTime();
      regexp = new RegExp($(this).data('id'), 'g');
      $('.fields').append($(this).data('fields').replace(regexp, time));
      return eevent.preventDefault();
  });

Answer 1

Я обычно делаю что-то вроде:

<div id='fields_area'></div>

Затем используйте $('#fields_area').append('.fields_container');, чтобы добавить поля

и $(this).closest('.fields_container').remove(); (запускается кнопкойв .fields_container) для удаления полей.

Оберните ваши данные * в <div class="fields_container"></div>, и это должно сделать это.

Редактировать: Оформить заказ cocoon: https://github.com/nathanvda/cocoon