我们如何根据编号附加和删除DIV？

Question

https://prnt.sc/mnw859xpgppq 在这里，我选择了3种产品，仅显示2个产品，只能使用一个文本框，您可以帮助我展示所有3个产品 例如，如果我为set1选择数量2，而set2的数量1则应显示2 set1和1 set2总计3张图像 我得到了我想要的东西，但我坚持根据不同数量选择器来操纵数据，请帮助我摆脱这个问题，谢谢

$(".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>