Ajax ответ, отображаемый несколько раз при каждом нажатии

Question

У меня есть два выпадающих списка, и я сначала отображаю динамически, нажимая кнопку Add More, а во-вторых, она вызывает ajax и отображает. Я имею в виду, когда я нажимаю кнопку Add more, она также вызывает Ajax, получает вывод и отображает второй выпадающий список. Это тоже работает.

Но у меня одна проблема. Теперь проблема в том, что когда я нажимаю кнопку Add more в первый раз, она вызывает ajax и отображает раскрывающийся список. Когда я нажимаю второй раз, я получаю два выпадающих списка ajax. Когда я нажимаю в третий раз, я получаю три выпадающих списка из ajax, и он продолжает повторять, как на картинке ниже. Мне нужно отобразить только один выпадающий список, который придет из ajax. Я поделился своим кодом сценария ниже.

 $(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 = '';

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    $.ajax({
    type: "POST",
    async: false,
    url: "/access_control/getname",
    //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>';
    }
  });
    var innercoutner = $(this).closest('.medication_info').find('.medication_info').children('.row').length+2;
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      numberIncr++;
      $(".medication_info").append('<input type="text" name="pp_order'+numberIncr+'" value="'+c+'-' + inner(innercoutner, 2) + '" class="form-control event_stop dynamicVal"><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>' + addrm);
    }
    count++;

  });
});

Answer 1

Сделать addrm локальной переменной, чтобы она не запоминала содержимое предыдущего вызова.

И код внизу, который добавляет .medication_info, должен находиться внутри success: функция.

$(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

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    $.ajax({
      type: "POST",
      url: "/access_control/getname",
      //data: {},
      dataType: 'json',

      success: function(response) {

        var 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>';
        //Check maximum number of input fields
        if (x < maxField) {
          x++; //Increment field counter
          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>' + addrm);
        }
        count++
      }

    });
  });
});

Также нет необходимости в async: false.