Вложенная динамическая форма с использованием jQuery

Question

Я изо всех сил пытаюсь разобраться с некоторыми jQuery, динамически создавая форму, основанную на выбранном входе

Я попытался сгенерировать новые строки / входы, которые отлично работают

$(document).ready(function() {
  $(".add-more").click(function() {
    var conceptName = $('.addmore').find(":selected").text();
    var html = $(".copy").html();
    $(".after-add-more").after(html);
  });
  $("body").on("click", ".remove", function() {
    $(this).parents(".control-group").remove();
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<form action="action.php">

  <div class="input-group control-group after-add-more">
    <select name="addmore[]" class="form-control" placeholder="Enter Name Here">
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
    <div class="input-group-btn">
      <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
    </div>
  </div>
</form>


<!-- Copy Fields -->
<div class="copy hide">
  <div class="control-group input-group" style="margin-top:10px">
    <select name="addmore[]" class="addmore form-control" placeholder="Enter Name Here">
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>

    <div class="input-group-btn">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
    </div>
  </div>
</div>

Я пытаюсь получить его, чтобы пользователь мог продолжать добавлять строки, однако, когда пользователь затем выбирает число в одной из строк с помощью выбора,затем он генерирует еще x полей, но только внутри этой строки, так что это динамическое поле внутри другого динамического поля.

Так, например, ниже, 4 строки были созданы с помощью кнопки добавления еще одной строки, но в основной строке2,пользователь выбрал число 4 в раскрывающемся списке, в котором были созданы еще 4 строки (имя) под заголовком основной строки 2.

[ main row ]
[ main row ]
[ main row2 ]
    [name] [name] [name] [name]
[ main row ]


[add another main row]

Answer 1

Вы можете добавлять поля ввода динамически, используя append('<input>')

$(document).ready(function() {
  $(".add-more").click(function() {
    var conceptName = $('.addmore').first().find(":selected").text();
    var html = $(".copy").html();
    html.replace('hide', '');
    $(".after-add-more").after(html);
  });
  $("body").on("click", ".remove", function() {
    $(this).parents(".control-group").remove();
  });
});

function selection(e) {
  $(e).parent().find('input').remove();
  for (let i = 0; i < parseInt(e.value); i++) {
    $(e).parent().append('<input>');
  }
}

.hide {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<form action="action.php">

  <div class="input-group control-group after-add-more">
    <select name="addmore[]" class="form-control" placeholder="Enter Name Here">
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
    <div class="input-group-btn">
      <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
    </div>
  </div>
</form>


<!-- Copy Fields -->
<div class="copy hide">
  <div class="control-group input-group" style="margin-top:10px">
    <select name="addmore[]" class="addmore form-control" placeholder="Enter Name Here" onchange="selection(this)">
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>

    <div class="input-group-btn">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
    </div>
  </div>
</div>