Arrays with dynamic dropdowns

Question

I am attempting to create some dynamic dropdowns using arrays, but I just can't wrap my head around the concept. I am successfully creating 4 arrays when the page loads(note:not the code below, just a representation of the arrays):

optionsOne ["sm","md","md","sm"]
optionsTwo ["white","white","red","red"]
availOne ["false","true","true","true"]
availTwo ["false","true","true","true"]

both available arrays are the same, I can cut that down to just one array, "available" What this data represents to me is that you follow the top down to a products availability, so "sm white" is false (unavailable). "md white" is true. "md red" is true. "sm red" is true.

Now I need to create select dropdowns, but I don't want duplicates. I am currently creating two dropdowns, one that represents size and one that represents color. Unfortunately, my first dropdown is showing 4 items (sm,md,md,sm) when it needs to show only the two unique ones (sm, md). My second dropdown is showing 4 items, but it should show only two and update based on the selection of the first one. It should always showing "white, red" but in the case of selecting "sm" on the first dropdown, it would set the "white" <option> to disabled, as sm/white availability is false.

I am completely stumped on how I would create some sort of array that would allow me to not have duplicates, but still generate the correct results in the second dropdown

optionsOne = [];
optionsTwo = [];
availOne = [];
availTwo = [];

Shopify.updateOptionsInSelector = function(selectorIndex) {
switch (selectorIndex) {
case 0:
var selector = jQuery('.single-option-selector:eq(0)');
break;
case 1:
var selector = jQuery('.single-option-selector:eq(1)');
break;
}
if(selectorIndex===0){
    selector.empty();
    //this is looping and creating duplicates
    for (var i=0; i<optionsOne.length; i++) {
        var option = optionsOne[i];
        var newOption = jQuery('<option></option>').val(option).html(option);
        selector.append(newOption);
    }
}else if(selectorIndex===1){
    selector.empty();
    //this is looping and creating duplicates
    //also, this one should create an option as disabled if the variant is unavailable
    for (var i=0; i<optionsTwo.length; i++) {
        var option = optionsTwo[i];
        var available = availTwo[i];
        //alert('changed the first selector, this item is labeled '+option+' and availability is '+available);
        if(available=="true"){
            var newOption = jQuery('<option></option>').val(option).html(option);
        }else{
            var newOption = jQuery('<option disabled></option>').val(option).html(option);
        }
        selector.append(newOption);
    }
}

selector.trigger('change');
};

Shopify.linkOptionSelectors = function(product) {
// Building our mapping object.
for (var i=0; i<product.variants.length; i++) {
var variant = product.variants[i];
//if (variant.available) {

// Gathering values for the 1st drop-down.
optionsOne.push(variant.option1);
if (variant.available) {
    availOne.push('true');
}else{
    availOne.push('false');
}   

// Gathering values for the 2nd drop-down.
optionsTwo.push(variant.option2);
if (variant.available) {
    availTwo.push('true');
}else{
    availTwo.push('false');
}

optionsOne = Shopify.uniq(optionsOne);
optionsTwo = Shopify.uniq(optionsTwo);

}

// Update options right away.
Shopify.updateOptionsInSelector(0);
if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
// When there is an update in the first dropdown.
jQuery(".single-option-selector:eq(0)").change(function() {
Shopify.updateOptionsInSelector(1);
return true;
});

};