Изменить идентификатор динамически добавленных div с помощью jQuery

Question

Я делаю сайт, где вы можете разместить свою личную информацию и сделать резюме.Теперь я хочу сделать часть, где вы можете поместить в курсы, которые вы изучали, но как я могу динамически добавить больше полей и изменить идентификатор элемента (+1), чтобы вы получили naam_opleiding1, naam_opleiding2, с jQuery?

<div class="input_fields_wrap">
    <input class="input-field" type="text" id="naam_opleiding" value="" placeholder="Naam opleiding"><br>
    <input class="input-field" type="text" id="naam_instituut" value="" placeholder="Naam instituut" /><br>
    <input class="input-field" type="text" id="startdatum" onfocus="(this.type='date')" value="" placeholder="Startdatum opleiding" /><br>
    <input class="input-field" type="text" id="einddatum" onfocus="(this.type='date')" value="" placeholder="Einddatum opleiding"/><br>
    <input class="input-field" type="text" id="overige_informatie"  value="" placeholder="Overige informatie"/><br>

        <button class="button add_field_button" id="opleiding_toevoegen" value="Opleiding toevoegen">Opleiding toevoegen</button>


$(wrapper).append('<div><br><br>' +
                    '<input class="input-field" name="mytext[]" type="text" id="naam_opleiding" value="" placeholder="Naam opleiding"><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="naam_instituut" value="" placeholder="Naam instituut" /><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="startdatum" value="" placeholder="Startdatum" /><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="einddatum" value="" placeholder="Einddatum"/><br>\n' +
                    '                        <input class="input-field" name="mytext[]" type="text" id="overige_informatie"  placeholder="Overige informatie"/><br>\n' +
                    '                        <a href="#" class="remove_field">Verwijder opleiding</a></div>'); //add input box
            }
            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });

Answer 1

Приведенный ниже код позволит вам добавить столько входных данных, сколько вы хотите, для нескольких групп ввода.

Группы ввода должны быть заключены в div с классом .input-wrapper с атрибутами placeholder и name, они используются для автоматического создания атрибутов ввода (включая уникальный id).

Кнопка удаления всегда удаляет последний ввод, который соответствует шаблону выбора, таким образом, когда высохраните информацию, индексы будут в последовательности.

Я немного упростил код для демонстрационных целей и прокомментировал его полностью.

Дайте мне знать, если это не было то, что выв надежде на

---

Демо

// Add click event to .add-input buttons
$(document).on("click", ".add-input", function() {

  // Move up DOM tree to nearest wrapper
  el = $(this).closest(".input-wrapper");

  // Store name and placeholder for group
  name = el.attr("name");
  placeholder = el.attr("placeholder");

  // Count number of existing inputs by checking which have an id that starts with wrapper name
  // Using name here, in addition to input, so that you could add other inputs into the group wrapper if needed
  // You may want to switch .children to .find if you want to add more wrappers
  count = el.children("input[id^=" + name + "]").length;

  // Add to index
  next = parseInt(count + 1);

  // Append input
  el.append("<input id='" + name + "-" + next + "' placeholder='" + placeholder + " " + next + "'>");


});

// Add click event to .add-input buttons
$(document).on("click", ".delete-input", function() {

  // Move up DOM tree to nearest wrapper to get name
  name = $(this).closest(".input-wrapper").attr("name");
  
  // Move up DOM tree to nearest wrapper and then find last input that matches pattern and delete it
  $(this).closest(".input-wrapper").children("input[id^=" + name + "]").last().remove();

});

input,
label {
  width: 100%;
  margin-bottom: 4px;
}

.input-wrapper {
  border: 1px solid black;
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="name" placeholder="Name">
<input name="email" placeholder="Email">

<div name="course" class="input-wrapper" placeholder="Course">

  <label>Courses</label>

  <button class="add-input">Add</button>
  <button class="delete-input">Delete</button>

  <input id='course-1' placeholder='Course 1'>
  <input id='course-2' placeholder='Course 2'>

</div>

<div name="qualification" class="input-wrapper" placeholder="Qualification">

  <label>Qualifications</label>

  <button class="add-input">Add</button>
  <button class="delete-input">Delete</button>

</div>