Only the last-appended onchange function for multiple select elements is called

I am programmatically creating multiple select elements with multiple options within each select element. I want to programmatically assign each select element with its own onchange function that will alert me the respective id for the select element.

$(document).ready(function () {

    // Headers indicate how many select elements I need.
    // In this example, they are only used to initialize a unique select.id
    for (var ndx = 0; ndx < headers.length; ndx++) {
        var header = headers[ndx];
        const rowName = header.innerHTML;
        var select = document.createElement("select");
        var options = ["Contains", "Equals", "Starts with", "More than", "Less than", "Between", "Empty",
            "Doesn't contain", "Doesn't equal", "Doesn't start with", "Is not more than", "Is not between", "Is not empty"];

        select.id = rowName + "-select";
        options.forEach(function(option) {
            var element = document.createElement("option");
            element.value = option;
            element.innerHTML = option;
            select.appendChild(element);
        });
        select.onchange = function () {
            alert("select.id: " + select.id);
        }
    }
}

However, upon changing any of the select elements' options, only the id of the very last select element is shown in the alert. Could this be a javascript referencing issue I am not familiar with? Thanks for the help.

via Jonathan Molina