I have 2 Html elements that I want to bind my data with simultaneously, But I have issues making multiple ajax calls with this method below.

$.when(
    $.ajax({
        url: "/api/options/GetAppointmentTypes",
        method: 'GET',
        data: data1
    }),
    $.ajax({
        url: "/api/options/GetAllAppointmentActivities",
        method: 'GET',
        data: data2
    })
)
    .then(function (data1, data2) {

        for (var i = 0; i < data1.length; i++) {
                $("#" + ctrl).append("<option value='" + data1[i].id + "'>" + data1[i].name + "</option>");
        }         
        for (var i = 0; i < data2.length; i++) {
                $("#" + ctrl).append("<option value='" + data1[i].id + "'>" + data1[i].name + "</option>");
            }
        }
    });

Source: Ask Javascript Questions