Why are color and size selections adding incorrectly to the cart?

[Anna_Wang1]

I have two custom dropdown menus, one for selecting color and the other for choosing size. When I attempt to add Select color and Select size to the shopping cart, it consistently adds the incorrect color and size. Could someone give me some suggestions on how to update my code? Thanks!!

Here is my Dropdown liquid code and Javascript code.

{% if found_product.variants.size > 1 %}
<!-- Variant Color Dropdown -->
<select class="variantSelect" data-selectid="{{ componentCounter }}" id="colorDropdown">
{% assign added_colors = "" %}
{% for variant in found_product.variants %}
{% unless added_colors contains variant.option1 %}
<option variant_id="{{ variant.id }}" value="{{ variant.option1 }}" variant_price="{{ variant.price }}">{{ variant.option1 }}</option>
{% capture added_colors %}{{ added_colors }}{{ variant.option1 }}{% endcapture %}
{% endunless %}
{% endfor %}
</select>

{% assign sizeVariants = found_product.variants | where: "option1", found_product.variants[0].option1 %}
{% if sizeVariants.size > 1 %}
<!-- Variant Size Dropdown -->
<select class="variantSelect" data-selectid="{{ componentCounter }}" id="sizeDropdown">
{% for variant in sizeVariants %}
<option variant_id="{{ variant.id }}" value="{{ variant.option2 }}" variant_price="{{ variant.price }}">{{ variant.option2 }}</option>
{% endfor %}
</select>
{% endif %}
{% endif %}

Javascript&colon;

// Custom Add To Cart Event
$(document).on('click', '.custom_add_to_cart .product-form--atc-button', function(event){
event.preventDefault();
var atc_pro_array = [],
_this = $(this);

$(_this).addClass('show_spinner');

var selectedColor = $('#colorDropdown').val();
var selectedSize = $('#sizeDropdown').val();

$(".qty_selector input.qty_input").each(function(){
var actual_pro_id = parseInt($(this).parents('.variant_block').attr('variant_id')),
main_pro_qty = parseInt($('.custom_add_to_cart #product-quantity-select').val()),
actual_pro_qty = parseInt($(this).val()) * main_pro_qty;

if(actual_pro_qty > 0){
atc_pro_array.push({
id: actual_pro_id,
quantity: actual_pro_qty,
properties: {
'Color': selectedColor, // Add selected color
'Size': selectedSize // Add selected size
}
});
}
});

let formData = {
'items': atc_pro_array
};

if(atc_pro_array.length){
$.ajax({
url: '/cart/add.js',
type: 'POST',
dataType: 'json',
data: formData,
success:function(data){
$(_this).removeClass('show_spinner');
$.getJSON("/cart.js", function(cartData){
if(cartData.item_count > 0){
$('.site-header-cart--button .site-header-cart--count').attr('data-header-cart-count', cartData.item_count)
$('.site-header-cart--button .site-header-cart--count').addClass('visible');
}
});
},
error:function(error){
$(_this).removeClass('show_spinner');
}
});
}else{
$(_this).removeClass('show_spinner');
}

});

$(document).on('change', '.variant_block .variantSelect', function(){
var variant_id = $(this).find('option:selected').attr('variant_id'),
variant_price = $(this).find('option:selected').attr('variant_price');
$(this).parents('.variant_block').attr({'variant_id': variant_id, 'variant_price': variant_price});
$(this).parents('tr').find('.priceColumn .price').html(Shopify.formatMoney(variant_price));

// Price Change
priceChange();
});

$(document).on('change', '.custom_add_to_cart #product-quantity-select', function(){
priceChange();
});

function priceChange(){
var main_pro_qty = parseInt($('.custom_add_to_cart #product-quantity-select').val()),
total_pro_price = 0;

$(".qty_selector input.qty_input").each(function(){
var actual_pro_qty = parseInt($(this).val()) * main_pro_qty,
variant_price = parseInt($(this).parents('.variant_block').attr('variant_price')),
final_variant_price = actual_pro_qty * variant_price;
total_pro_price = total_pro_price + final_variant_price;
$('.product-pricing .price__current .money').html(Shopify.formatMoney(total_pro_price));
});
}