Call custom function on one element at a time

Question

I have a jQuery extension method to create custom animated drop-down select lists based on this answer. Using this method on a page with one drop-down works perfectly:

The extension method is as follows:

$.fn.extend({
    slidingSelect: function (options) {
        var select = $(this);
        var selector = select.selector;

        var width = $(selector).width();

        var selectedValue = select.val();

        if (selectedValue === "undefined")
            selectedValue = select.find("option:first").val();

        console.log($(selector + " option:selected").text());

        var divToggle = $("<div class='SelectorToggle SelectorToggle-defualt'>" + $(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button></div>")
                        .attr({ id: select.attr("id") + "Toggle" })
                        .css({ width: select.width() + 20 })
                        .click(function () {
                            $(selector + "Toggle").toggleClass("SelectorToggle-defualt");
                            $(selector + "Toggle").toggleClass("SelectorToggle-pressed");
                            $(selector).slideToggle("fast");
                        }).insertBefore(select);

        var optionCount = $(selector + " option").length;

        if (optionCount < 5) {
            select.attr("size", optionCount);
        }
        else {
            select.attr("size", 5);
        }

        select.addClass("drop-down-selector");

        $(selector).css({ 'width': select.width() + 20, 'position': 'absolute', "z-index": '9999' });

        select.change(function () {
            divToggle.html($(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button>");
            $(selector + "Toggle").toggleClass("SelectorToggle-defualt");
            $(selector + "Toggle").toggleClass("SelectorToggle-pressed");
            $(selector).slideToggle("fast");
        });
    }
});

I call it as follows:

 $("#LanguageSelector").hide().slidingSelect();

I am however having endless issues getting it to work on a page with multiple drop-downs. My dropdowns are dynamically created as part of a DataTable solution with server-side processing. The drop-downs in the footer:

If i call the following:

$("select").hide().slidingSelect();

then somehow all drop-downs on the page create the custom control:

if I attempt to call the extension method on each element individually:

$("select").hide().each(function(index) {
    $(this).slidingSelect();
});

I also tried to call the extension method individually as the drop-downs are created (to just one of them):

$('#RelatedCasesGrid tfoot th').each(function () {

    var col = $(this).html();

    //..........

    else if (col === "ComplaintTypeName") {
        $(this).html(GetDropDownInput(col, caseId));
        var element = $(this).find("select");
        element.hide().slidingSelect();
    }

The method GetDropDownInput(col, caseId) creates the drop-downs as follows:

function GetDropDownInput(col, id) {

    var control;

    $.ajax({
        method: "GET",
        dataType: "json",
        async: false,
        url: "/OATS/Api/GetColumnItems/" + id + "?column=" + col
    }).done(function (data) {
        control = "<select  id='selector' class='table-filter-input-drop-down-list'><option value='' disabled selected>Filter by</option>"

        for (var i = 0; i < data.length; i++) {

            control += "<option col-type=" + data[i].Type + " value='" + data[i].Name + "'";

            if (data[i].Selected) {
                control += "selected='selected'";
            }

            control += ">" + data[i].Name + "</option>";
        }

        control += "</select>";
    });

    return control;
}

The result of this:

Answer 1

From: http://www.w3schools.com

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

But your ajax method create the same id for all selects: "selector". Change this method to create unique id (value of 'col' parameter seems be ok for this purpose), and then call:

$("#your_unique_id").hide().slidingSelect();