Имя проблем приращения поля, которые генерируются динамически

Question

Я использую Codeigniter, но моя проблема не связана с Codeigniter. У меня возникают некоторые проблемы с моим jQuery.

. При загрузке страницы отображается кнопка Add more, поэтому, когда пользователь нажимает Add more, он динамически отображает раскрывающийся список. ( Примечание : второй раскрывающийся список будет отображаться с ajax успеха. Поэтому теперь я отображаю только текст для понимания).

Ниже приведены два раскрывающихся списка.

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

Пользователь может добавить еще одно раскрывающееся поле, нажав только Add more.

проверьте изображение ниже

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

Например

Первый выпадающий список

<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>

<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">

Второй выпадающий список

<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">

Обратите внимание здесь каждый раз я получаю name="pp_fileStatus2" для каждого выпадающего списка и name="reasonDate2" для каждого поля ввода.

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  var addrm = '';

  $.ajax({
    type: "POST",
    async: false,
    url: "/access_control/getRMname",
    //data: {},
    dataType: 'json',

    success: function(response) {
      addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
      $.each(response, function(key, data) {
        addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
        //rm_details.push(addrm);
      });
      addrm += '</select>';
    }
  });


  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
    }
    count++;

  });
  $(document).on('change', '.pp_fileStatus', function(event) {


    if (($(this).val() == '1') || ($(this).val() == '3')) {
      $(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '"  class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark">');
    } else {
      $(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
    }
  });

  numberIncr++;

});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<div class="row">
  <div class="medication_info">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

Вам необходимо увеличить значение внутри обратного вызова .click, поскольку вы генерируете имя формы внутри события .click.

Увеличиваете numberIncr при нажатии кнопки. Также удалите numberIncr++ в конце сценария.

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  var addrm = '';

  $.ajax({
    type: "POST",
    async: false,
    url: "/access_control/getRMname",
    //data: {},
    dataType: 'json',

    success: function(response) {
      addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
      $.each(response, function(key, data) {
        addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
        //rm_details.push(addrm);
      });
      addrm += '</select>';
    }
  });


  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter

      // CHECK: Added this to increment number on click
      numberIncr++;

      $(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
    }
    count++;

  });
  $(document).on('change', '.pp_fileStatus', function(event) {


    if (($(this).val() == '1') || ($(this).val() == '3')) {
      $(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '"  class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark">');
    } else {
      $(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
    }
  });
  
  // CHECK: remove the below numberIncr logic
  // numberIncr++; --> remove this
});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<div class="row">
  <div class="medication_info">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>