Issue with Dynamically populating and Removing from List Collectors

[Yep]

Hello,

I have requirements for a catalog item with two reference fields and two list collector fields. The first list collector is populated by the first reference. The second list collector is populated with a combination of the first list collectors values and the second references values. This is working fine. Then on the first list collector I want to be able to remove values in it and it remove values from the second list collector. Currently the code I have for this works as well as the code required for the other thing. But here is the issue this all works the first time you select a value in the reference fields and the list collectors are populated. But if you want to change the first reference field it will not fully populate the second combined list collector. In fact it removes the first value of the first reference field from that newly populated combined list collector. I cant for the life of me figure out a way to tell the code that removes from the Combined list collector onChange of the first list collector to NOT run when it shouldn't. See attached image to make this easier to visualize.

Note: In the image it shows that on the second list collector it populates with two apps correctly but this screenshot is from a video I took of it and I just captured the image right before it removes that second value inside it. So a second after this image was taken that "at" value is removed. 

Here is the onChange script running that removes values from that second list collector based on the first:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) {
        return;
    }
    //var originAppsList = g_form.getValue('u_list_of_origin_server_apps').split(',');
    var combinedAppsList = g_form.getValue('u_combined').split(',');
    var previousValue = g_form.getValue('u_previous_value').split(',');
    var currentValue = newValue.split(',');

    if(g_form.getValue('u_remove_check') == 'true'){


        var missingValue;
        function findMissingValue(currentArray, previousArray) {
            missingValue = previousArray.filter(function(item) {
                return !currentArray.includes(item);
            });
        return missingValue.toString();
        }
        //When removing from the Origin server App(s) list collector it wont remove the final value from Combined Apps so this does that
        if(newValue == ''){
            var indexOfPrevValue = combinedAppsList.indexOf(previousValue);
            var cleanUpCombined = combinedAppsList.splice(indexOfPrevValue, 1);
            g_form.setValue('u_combined', cleanUpCombined.toString());
            return;
        }
            //This removes values from the Combined as they are removed from the Origin server apps list collector
            var location = combinedAppsList.indexOf(findMissingValue(currentValue,previousValue));
            combinedAppsList.splice(location, 1);

            g_form.setValue('u_combined', combinedAppsList.toString());
            g_form.setValue('u_previous_value', currentValue.toString());
    }
        
}

I have tried everything I can think of to get this to work. I did try using a shared function between client scripts and have not tried using script includes and Ajax to do the removal because I assume I would get the same result. I only used script includes + client scripts to dynamically populate the two list collectors. 

Let me know if you have more questions. Thanks!

[Yep]

Also I forgot to say (and cant find the edit button) ignore that "Origin server previous value" field it is now removed and was a (failed) attempt to make this work.