Php 自定义循环切换

我是php和jquery的初学者。当我在woocomemerce归档循环中单击查看按钮时，我正在尝试切换按钮。我这样做

add_action('woocommerce_after_shop_loop_item','select_variation_popup', 15);

function select_variation_popup() {
    
global $product;
    
    if ($product->is_type('variable') && $product->is_in_stock())
     {
         echo '<button type="button" id="variation-toggle" >View Detais</button>';
        ?> <style> button#variation-toggle {
    width: 100% !important;
    font-weight:bold;
} 
form.variations_form.cart {
    display:none;
}
</style> <?php
    }
}

对于jquery，我是这样做的

add_action('wp_footer', 'toggle_variable');
function toggle_variable() {
 ?> 
    <script>
$(document).ready(function () {
    $("button#variation-toggle").click(function () {
        $("form.variations_form.cart").toggle();
    });
});
</script>
<?php
}

我的问题是，当我点击一个产品时，所有产品的形式都不同。我如何限制只显示一个变更表

任何帮助都将不胜感激！！！

---

谢谢

ID在HTML文档中必须是唯一的，通过在循环中创建具有静态ID的元素，您已经违反了这一基本规则。感谢您的回答@CBroe。可以重新创建上面的代码段，并按产品（如id或名称）在id中包含某些内容。。然后重写jquery代码段，就像告诉第二个类获取这个id或名称一样？谢谢你抽出时间！我真的不明白你想干什么。但正如CBroe所说，您正在将多个对象分配给同一个ID，如果您想将相同的样式和Onclick事件应用于按钮，请改用类。您能否进一步说明您希望实现的目标以及您目前得到的结果是什么？与其尝试创建唯一的ID，不如让自己远离总是按ID选择元素的做法，因为这并不是选择元素的唯一方法。首先编写JS代码，以便它通过公共类选择要绑定到的元素，然后使用DOM中的关系元素（如果需要从单击处理程序中正在处理的当前元素进行导航）。到与之相关的其他元素父元素、同级元素等。我希望单击按钮查看更多以切换变体表单。在照片示例中，我已经单击了第一个按钮。我希望变体表单在每次单击按钮时显示一次。