Javascript Dynami c Вставить строку формы пользователем

Question

У меня есть такая проблема: я создал в своей форме часть, где пользователи могут добавлять от 0 до 10 строк. Каждая строка содержит 3 ввода.

Html код:

<div class="form-row">
    <div class="form-group col-md-3">
      <label for="inputCity">Mesi a carico</label>
      <select name="mesi_carico[]" id="inputState" class="form-control">
        <option value="12">12</option>
        <option value="11">11</option>
        <option value="10">10</option>
        <option value="9">9</option>
        <option value="8">8</option>
        <option value="7">7</option>
        <option value="6">6</option>
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label for="inputState">Min 3 anni?</label>
      <select name="min_3_anni[]" id="inputState" class="form-control">
      <option value="No">No</option>
        <option value="Si">Si</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label for="inputZip">% Detr. Spettante</label>
      <select name="perc_carico[]" id="inputState" class="form-control">
      <option value="100">100%</option>
        <option value="50">50%</option>
      </select>
    </div>
  </div>

Здесь мой JSCode

 $(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><div class="form-row">
    <div class="form-group col-md-3">
      <label for="inputCity">Mesi a carico</label>
      <select name="mesi_carico[]" id="inputState" class="form-control">
        <option value="12">12</option>
        <option value="11">11</option>
        <option value="10">10</option>
        <option value="9">9</option>
        <option value="8">8</option>
        <option value="7">7</option>
        <option value="6">6</option>
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label for="inputState">Min 3 anni?</label>
      <select name="min_3_anni[]" id="inputState" class="form-control">
      <option value="No">No</option>
        <option value="Si">Si</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label for="inputZip">% Detr. Spettante</label>
      <select id="inputState" class="form-control">
      <option value="100">100%</option>
        <option value="50">50%</option>
      </select>
    </div>
  </div><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

К сожалению, он не работает.

Где проблема? И мне нужно передать массив значений, например array [0] array [1] array [2] e cc e cc ... Я не уверен в этом.

Спасибо за ваша помощь.