https://prnt.sc/mNw859XPGPPQ Here I have got 3 products selected and its showing only 2 it is works for only one textbox could you please help me to show all 3 products for example if i select quantity 2 for set1 and quantity 1 for set2 then it should show 2 set1 and 1 set2 total 3 images on top I got what I want but I am stuck here to manipulate data based on different quantity selector could you please help me to get rid of this problem thank you
$(".quantity__input").change(function(){
var img_src =$(this).parents(".atc_coll").find("input[type='hidden']").attr("data-src");
var total = $(this).val();
var oldLength = $(".six_Products > .single_product").length;
var change = total - oldLength;
if (change > 0) {
for (i = 0; i < change; i++) { $(".six_Products").append(`<div class='single_product'><img src='${img_src}'
style='height:150px; width:150px;'></div>`);
}
}
else {
change = Math.abs(change)
$( ".six_Products > .single_product").each(function( index ) {
$(this).remove();
if (index == (change -1)) {
return false;
}
});
}
});<div class="six_pack_conatiner ">
<div class="six_Products">
</div>
<div class="atc_price_wrap">
<a href="javascript:void(0)" class="atc_all_six">Add To Cart</a>
</div>
</div>
<div class="atc_coll">
<a href="javascript:void(0)" class="atc_link" data-id="{{ card_product.selected_or_first_available_variant.id }}"
data->Add To Cart</a>
<quantity-input class="quantity" style="display:none;">
<button class="quantity__button no-js-hidden" name="minus" type="button">
-
</button>
<input class="quantity__input" type="number" name="quantity" min="0" value="0" readonly>
<button class="quantity__button no-js-hidden" name="plus" type="button">
+
</button>
</quantity-input>
<input type="hidden" data-src="{{ card_product.featured_media | img_url: 'master' }}"
data_price="{{card_product.price}}">
</div>