Why does my shopping cart duplicate items when selecting colors in reverse order?

Technical Q&A
1

Hey guys my Client has a weird bug where If you select products using the color swatch from left to Right the shopping cart will list the items correctly

However if you select your products colors from right to left, the Cart will null the first choice and Duplicate the 2nd choice.

Is the problem in my JavaScript? or in my Liquid code?

:Here is my Liquid Code:

{%- assign topNum = 0 -%} {%- assign bottomNum = 0 -%} {%- assign playsuitNum = 0 -%} {% for product in collection.products %} {% for tag in product.tags %} {% if tag == 'bodysuit' %} {%- assign topNum = topNum | plus: 1 -%} {% elsif tag == 'playsuit' %} {%- assign playsuitNum = playsuitNum | plus: 1 -%} {% elsif tag == 'bottoms' %} {%- assign bottomNum = bottomNum | plus: 1 -%} {% endif %} {% endfor %} {% endfor %}

{%- assign kitNum = 3 -%}
{%- assign extraLeft = kitNum | minus: topNum -%}

Select {{ kitNum }} colors from the following bodysuits, You've Selected: [0/{{ kitNum }}]

{% for product in collection.products %} {% for tag in product.tags %} {% if tag == 'bodysuit' %} {% include 'sub-product' with product, kit: true, extra: extraLeft %} {% endif %} {% endfor %} {% endfor %}

:Here is my JavaScript for Bundles:

let addToCartBundleButtons = document.querySelectorAll(‘.add-to-cart–bundle’);
if(addToCartBundleButtons.length) {
for(let i = 0; i < addToCartBundleButtons.length; i++) addToCartBundleButtons[i].addEventListener(‘click’, function() {
let bundleSections = document.querySelectorAll(‘.product-grid–bundle’);
let selected_variants = ;

for(let i = 0; i < bundleSections.length; i++) {
if(!isBundleSectionFilled(bundleSections[i])) {
document.querySelector(‘.bundle-popup-message’).innerHTML = bundleSections[i].getAttribute(‘data-error’);
document.querySelector(‘.bundle-popup-message’).classList.add(‘bundle-popup-message–active’);
setTimeout(function() {
document.querySelector(‘.bundle-popup-message’).classList.remove(‘bundle-popup-message–active’);
}, 3000);
bundleSections[i].closest(‘.product-grid__container’).scrollIntoView({behavior: ‘smooth’});
return false;
}

let activeSwatchBckp = bundleSections[i].querySelector(‘.color-swatch–active’);
let selectedSwatches = bundleSections[i].querySelectorAll(‘.product-cell:not(.product-cell–hidden) .color-swatch–selected’);
for(let j = 0; j < selectedSwatches.length; j++) {
let qty = selectedSwatches[j].getAttribute(‘data-quantity’);
let s = selectedSwatches[j].closest(‘.product-cell’).querySelector(‘.product-select’);
let rcid = s.options[s.selectedIndex].getAttribute(‘data-rcid’);
let id = selectedSwatches[j].closest(‘.product-cell’).querySelector(‘.product-select’).value;
//let title = selectedSwatches[j].text;
//console.log(s);
//console.log(‘id, rcid’,id, rcid);
//console.log(‘qty’, qty);
selectedSwatches[j].click();
selected_variants.push([id, qty, rcid]);
}
activeSwatchBckp.click();
}

var bundleKey = cyrb53(selected_variants.sort(function(a, b) {
return a[0] + a[1] > b[0] + b[1];
}).join(‘.’));

let qty = 1;
let qtyEl = document.getElementById(‘Quantity’);
if(qtyEl && !isNaN(Number(qtyEl.value)) && qtyEl.value > 0) qty = Number(qtyEl.value);
let kit = false;
let footer = document.querySelector(‘.product-grid__footer’);
if(footer) {
kit = footer.getAttribute(‘data-kit’);
}
let subscribe = this.classList.contains(‘add-to-cart–subscribe’);

if(subscribe) {
$.ajax({
type: “POST”,
dataType: “json”,
url: “/cart/clear.js”,
success: function() {
addVariantsToCart(selected_variants, qty, bundleKey, true, kit);
}
});
} else addVariantsToCart(selected_variants, qty, bundleKey, false, kit);
});
}