如何为每个HTML复选框分配独立的PayPal Add to Cart按钮

问题背景 #

我做了一套颜色选择区域，点击不同的颜色选项会切换显示对应颜色的商品图片。现在需要给每个颜色选项分配独立的PayPal Add to Cart按钮，让用户选中颜色后就能直接点击按钮购买对应商品，同时优化当前“选颜色看商品→再通过PayPal按钮下拉选商品”的繁琐流程。

现有HTML结构（颜色选择区） #

<div class="colors">
    <div class="ColourLabel"><div class="c5"></div><span>Moonwalk<br>Grey</span></div>
    <div class="ColourLabel"><div class="c9"></div><span>Midnight<br>Black</span></div>
    <div class="ColourLabel"><div class="c10"></div><span>Volcanic<br>Orange</span></div>
    <div class="ColourLabel"><div class="c11"></div><span>Chili<br>Red</span></div>
    <div class="ColourLabel"><div class="c12"></div><span>Lapisluxury<br>Blue</span></div>
    <div class="ColourLabel"><div class="c13"></div><span>Thunder<br>Grey</span></div>
    <div class="ColourLabel"><div class="c7"></div><span>British Racing<br>Green</span></div>
    <div class="ColourLabel"><div class="c8"></div><span>Blazing<br>Red</span></div>
    <div class="ColourLabel"><div class="c2"></div><span>Pepper<br>White</span></div>
    <div class="ColourLabel"><div class="c3"></div><span>White<br>Silver</span></div>
</div>

现有颜色切换脚本片段 #

$(".product2 .c5").click(function(){
    $(".product2 .c1").css("box-shadow","none");
    $(".product2 .c2").css("box-shadow","none");
    $(".product2 .c3").css("box-shadow","none");
    $(".product2 .c4").css("box-shadow","none");
    $(".product2 .c5").css("box-shadow","0 0 0 2px #0D1F2D, 0 0 0 3.5px #CB3843");
    $(".product2 .c6").css("box-shadow","none");
    $(".product2 .c7").css("box-shadow","none");
    $(".product2 .c8").css("box-shadow","none");
    $(".product2 .c9").css("box-shadow","none");
    $(".h2").animate({opacity:0},function(){
        $(".h2").attr("src","img/Ark/ARK MG.webp");
    });
    $(".h2").animate({opacity:1});
});

失败的PayPal按钮尝试 #

我曾尝试给每个颜色选项套独立的PayPal容器，但只有第一个按钮能正常显示：

<div id="paypal-container-SOME-ID">
    <div class="ColourLabel"><div class="c5"></div><span>Moonwalk<br>Grey</span></div>
</div>
<div id="paypal-container-ANOTHER-ID">
    <div class="ColourLabel"><div class="c9"></div><span>Midnight<br>Black</span></div>
</div>

对应的PayPal脚本：

<script src="https://www.paypal.com/sdk/js?client-id=MY-ID&components=hosted-buttons&disable-funding=venmo&currency=GBP"></script>
<script>
paypal.HostedButtons({
    hostedButtonId: "SOME-ID",
}).render("#paypal-container-SOME-ID")
</script>
<script>
paypal.HostedButtons({
    hostedButtonId: "ANOTHER-ID",
}).render("paypal-container-ANOTHER-ID")
</script>

当前可用的JS代码（单颜色绑定示例） #

目前已经实现了单个颜色选项的绑定逻辑，点击该颜色后会替换PayPal购买链接，注意：链接的target必须设为_blank，否则PayPal不接受该链接：

$(".product2 .c5").click(function(){
    $(".product2 .c1").css("box-shadow","none");
    $(".product2 .c2").css("box-shadow","none");
    $(".product2 .c3").css("box-shadow","none");
    $(".product2 .c4").css("box-shadow","none");
    $(".product2 .c5").css("box-shadow","0 0 0 2px #0D1F2D, 0 0 0 3.5px #CB3843");
    $(".product2 .c6").css("box-shadow","none");
    $(".product2 .c7").css("box-shadow","none");
    $(".product2 .c8").css("box-shadow","none");
    $(".product2 .c9").css("box-shadow","none");
    $(".product2 .c10").css("box-shadow","none");
    $(".product2 .c11").css("box-shadow","none");
    $(".product2 .c12").css("box-shadow","none");
    $(".product2 .c13").css("box-shadow","none");
    $(".product2 .c14").css("box-shadow","none");
    $(".PpButton .c145").animate({opacity:0},function(){
        document.body.insertAdjacentHTML(
            'beforeend',
            '<a href="https://www.paypal.com/ncp/payment/LINK" target="_blank"><img class=".PpButton" src="img/Web/paypal.webp"></a>');
    });
    $(".PpButton .c145").animate({opacity:1});
    $(".h2").animate({opacity:0},function(){
        $(".h2").attr("src","img/Ark/ARK MG.webp");
    });
    $(".h2").animate({opacity:1});
});

需求 #

需要为每个.product2 .c(编号)元素配置独立的PayPal按钮，优化用户购买流程。

内容的提问来源于stack exchange，提问作者Steven