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 %}

{% assign added_colors = "" %} {% for variant in found_product.variants %} {% unless added_colors contains variant.option1 %} {{ variant.option1 }} {% capture added_colors %}{{ added_colors }}{{ variant.option1 }}{% endcapture %} {% endunless %} {% endfor %}

{% assign sizeVariants = found_product.variants | where: “option1”, found_product.variants[0].option1 %}
{% if sizeVariants.size > 1 %}

{% for variant in sizeVariants %} {{ variant.option2 }} {% endfor %} {% endif %} {% endif %}

Javascript:

// 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));
});
}