Html yapım şöyle

<div id="attributes_select">
	<div class="attributes_content" id="attribute1" data-property_id="1">
		<span>Size</span>
		<label id="attribute_val_id-5" class="attribute_buton_el" for="attributes_check_5">
			<input type="checkbox" name="attributes[1][]" id="attributes_check_5" value="5" data-atr_name="Large" class="vary_add_event">Large
		</label>
		<label id="attribute_val_id-2" class="attribute_buton_el" for="attributes_check_2">
			<input type="checkbox" name="attributes[1][]" id="attributes_check_2" value="2" data-atr_name="Medium" class="vary_add_event">Medium
		</label>
		<label id="attribute_val_id-1" class="attribute_buton_el" for="attributes_check_1">
			<input type="checkbox" name="attributes[1][]" id="attributes_check_1" value="1" data-atr_name="Small" class="vary_add_event">Small
		</label>
	</div>
	<div class="attributes_content" id="attribute2" data-property_id="2">
		<span>Color</span>
		<label id="attribute_val_id-4" class="attribute_buton_el" for="attributes_check_4">
			<input type="checkbox" name="attributes[2][]" id="attributes_check_4" value="4" data-atr_name="Mavi" class="vary_add_event"> Blue
		</label>
		<label id="attribute_val_id-6" class="attribute_buton_el" for="attributes_check_6">
			<input type="checkbox" name="attributes[2][]" id="attributes_check_6" value="6" data-atr_name="Sarı" class="vary_add_event">Yellow
		</label>
		<label id="attribute_val_id-3" class="attribute_buton_el" for="attributes_check_3">
			<input type="checkbox" name="attributes[2][]" id="attributes_check_3" value="3" data-atr_name="Yeşil" class="vary_add_event">Green
		</label>
	</div>
</div>

Yapmak istediğim şey her attribute tıklandığında
<div id="varyant_combinasyonlar">
    Burada uygun combinasyonun eklenmesi shopfy daki gibi yani
</div>

Javascript kodarım

    //parent click element
    addVaryBtn = document.getElementById("attributes_select");
    
		let combos = [];
		let allVaryant = [];
		
		addVaryBtn.addEventListener("click", (e) =>{
					
				if(e.target && e.target.closest(".vary_add_event")){

					let parentEl = e.target.closest(".attributes_content");
					let properyId = parentEl.dataset.property_id;
					let atrId = e.target.value;
					let atrName = e.target.dataset.atr_name;
					let propertyName = parentEl.querySelector("span").textContent;
					console.log(atrId)
					console.log(atrName)
					console.log(propertyName)
					
				}
		});

//Şöyle bir yapı buldum biryerde ama nasıl yapacağımı bilemedim
                    combos = [];
					
					/*
					    Sanırım bu diziler
					    attributler
					    yani 
					    birinci dizi  [S,M,L]
					    ikinci dizi  [Sarı,Mavi,Yeşil]
					    üçüncü dizi  [Cotton,Keten,Sentetik]
					    Bunların combinasyonları sanırım ama 
					    kodu uygulayamadım
					*/
					
					[1,2,3].each do |v1|
					  [4,5,6].each do |v2|
					    [7,8,9].each do |v3|
					      combos << [v1, v2, v3]
					    end
					  end
					end
					console.table(combos);
					

Yapmak istediğim şey her attribute tıklandığında