How do I make sure the second dropdown only gets its options from a JQuery API call?

I have three ASP.NET-Generated drop downs:


When the user switches the choice in #FacilityID, i need to make a call out to my API and get the new options available for #ShiftID and #LineID.

Right now, I use the following code to do so:

$(function() {
            $("#DefaultFacilityId").change(function() {
                var val = $(this).val();
                var subTypes = "";
                    { id: val },
                    function(data) {
                            function(index, item) {
                                subTypes += "<option value='" + item.Id + "'>" + item.ShiftCode + "</option>"

                    { id: val },
                    function(data2) {
                            function(index, item) {
                                subTypes += "<option value='" + item.Id + "'>" + item.LineName + "</option>"

We use this exact code on other pages, but usually just one at a time (IE, changing the #FacilityID drop down changes the values in #ShiftID). Seeing as this is a special case of that exact function, I thought I'd reuse the code as much as I could.

However, I'm running into a result where #ShiftID completes normally, but #LineID picks up the results for #ShiftID AND its own results.

How do I stop the #LineID Drop Down from getting the #ShiftID results, and why is this happening?