Как выполнить функцию Ajax несколько раз внутри функции?

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

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

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

Но не работает.

Это мой код:

function datepicker() {
  $( ".datepicker" ).datepicker({
    dateFormat: "dd-mm-yy"
  });

  $.datepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '< Ant',
    nextText: 'Sig >',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };

  $.datepicker.setDefaults($.datepicker.regional['es']);
}


function selectproductos() {
  alert("hola");
  var select = $('.producto');

  $.ajax({
    type: "POST",
    url: "selectproductos",
    data: {
      id: $(this).val(),
      '_token': $('input[name=_token]').val()
    },
    success: function(data) {
      var htmlOptions = [];
      if ( data.length ){
        for( item in data ) {
          html = '<option value = "' + data[item].id + '">' + data[item].producto + '</option>';
          htmlOptions[htmlOptions.length] = html;
        }

        // here you will empty the pre-existing data from you selectbox and will append the htmlOption created in the loop result
        select.empty().append( htmlOptions.join('') );
      }
    },
    error: function(error) {
      alert(error.responseJSON.message);
    }
  });
}

$(document).ready(function() {
  $( '.remove' ).click(function() {
    $(this).closest('tr').remove();
  });

  $('.select2').select2();
  selectproductos();
  datepicker();

  $("#add").click(function() {
    var lastField = $("#buildyourform tr:last");
    var intId = (lastField && lastField.length && lastField.attr("idx") + 1) || 1;
    var fieldWrapper = $("<tr class=\"fieldwrapper\" id=\"field" + intId + "\"> </tr>");
    fieldWrapper.data("idx", intId);
    var producto = $("<td><select name= \"producto\" placeholder= \"producto\" class=\"fieldname producto\" required=\"required\"><option value=\"\">Selecciona un producto</option></select></td>");
    var presentacion = $("<td><input type=\"text\" name= \"presentacion\" placeholder= \"presentacion\" class=\"fieldname\" /></td>");
    var cantidad = $("<td><input type=\"text\" name= \"cantidad\"  placeholder= \"cantidad\" class=\"fieldname\" /></td>");

    var fechaEntrega = $("<td><input type=\"text\" class=\"datepicker\" ></td>");
    var nota = $("<td><textarea rows=\"2\" cols=\"30\" name=\"nota[]\" id=\"notas\" maxlength=\"255\"></textarea></td>");

    var etiquetado = $("<td><input type=\"checkbox\" name=\"etiquetado\" value=\"Si\"></td>");

    var removeButton = $("<td><input type=\"button\" class=\"remove\" value=\"-\" /></td>");

    removeButton.click(function() {
      $(this).parent().remove();
    });

    fieldWrapper.append(producto);
    fieldWrapper.append(presentacion);
    fieldWrapper.append(cantidad);
    fieldWrapper.append(fechaEntrega);
    fieldWrapper.append(nota);
    fieldWrapper.append(etiquetado);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
    selectproductos();
    datepicker();
  });
});