如何添加点击所有购买按钮后出现的表单？

Question

更准确地说，表单只出现在页面的第一个 id="my-form" 上，例如，如果我的第一个按钮 id="my-form" 和第二个按钮具有相同的 id ，那么该表单只会出现在第一个按钮上，而不会出现在其他按钮上。

提前谢谢！！！！！！！

const openForm = document.getElementById("my-form")
exitForm = document.getElementById("close-buy-form")
main = document.querySelector("main")

openForm.addEventListener("click", () => {
    main
        .classList
        .add("body-btn");
})
exitForm.addEventListener("click", () => {
    main
        .classList
        .remove("body-btn");
})

main.body-btn {
    display: block;
}

<nav>
    <img class="exit-btn" id="exit-btn-js" src="/assets/exit.svg" alt="">
    <ul class="nav-links">
        <li><a data-link="home" class="normal-a nav-link">Home</a></li>
        <li><a data-link="about" class="normal-a nav-link">About</a></li>
        <li><a data-link="products" class="normal-a nav-link">Products</a></li>
        <li><a data-link="reviews" class="normal-a nav-link">Reviews</a></li>
        <li class=" buy-now">
            <a href="#order" class="premium-a" id="my-form"><span class="didi">Buy now</span></a>
        </li>
    </ul>
</nav>

<section class="hero">
    <div class="left-hero">
        <h1>Present Your <span>Cool</span> Product</h1>
        <p>Lorem ipsum dolor.</p>
        <div class="buy-now">
            <a href="#order" class="didi" id="my-form">BUY NOW</a>
        </div>
    </div>
    <div class="right-hero">
        <img src="/assets/watch-2.png" alt="shoe-6">
    </div>
</section>

附言。 1 个月的 html/css 和这些显示和隐藏元素的 js 技巧。

Answer 1

好吧，我在尝试代码 3 小时后得到了解决方案……我确实发现我需要为每个按钮添加一个不同的 id，并且该 id 应该在 就像在下一个代码中一样：

<script>
    const openForm = document.getElementById("my-form")
    openForm2 = document.getElementById("my-form-2")
    exitForm = document.getElementById("close-buy-form")
    main = document.querySelector("main")
    

    openForm2.addEventListener("click", () => {
        main
            .classList
            .add("body-btn");
    })
    openForm.addEventListener("click", () => {
        main
            .classList
            .add("body-btn");
    })
    exitForm.addEventListener("click", () => {
        main
            .classList
            .remove("body-btn");
    })
</script>