title: How to add a form that appears after clicking on all the buy buttons?
body: <p>to be more precise the form apear only on the first id=&quot;my-form&quot; of the page , for example if my first button with id=&quot;my-form&quot; and also the second button with the same id ,then the form will apear only on the first button and does't work on the other buttons.</p>
  <p>thanks in advance!!!!!!!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const openForm = document.getElementById("my-form")
  exitForm = document.getElementById("close-buy-form")
  main = document.querySelector("main")
  
  openForm.addEventListener("click", () =&gt; {
      main
          .classList
          .add("body-btn");
  })
  exitForm.addEventListener("click", () =&gt; {
      main
          .classList
          .remove("body-btn");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>main.body-btn {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
      &lt;img class="exit-btn" id="exit-btn-js" src="/assets/exit.svg" alt=""&gt;
      &lt;ul class="nav-links"&gt;
          &lt;li&gt;&lt;a data-link="home" class="normal-a nav-link"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-link="about" class="normal-a nav-link"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-link="products" class="normal-a nav-link"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-link="reviews" class="normal-a nav-link"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
          &lt;li class=" buy-now"&gt;
              &lt;a href="#order" class="premium-a" id="my-form"&gt;&lt;span class="didi"&gt;Buy now&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;section class="hero"&gt;
      &lt;div class="left-hero"&gt;
          &lt;h1&gt;Present Your &lt;span&gt;Cool&lt;/span&gt; Product&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor.&lt;/p&gt;
          &lt;div class="buy-now"&gt;
              &lt;a href="#order" class="didi" id="my-form"&gt;BUY NOW&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right-hero"&gt;
          &lt;img src="/assets/watch-2.png" alt="shoe-6"&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>PS. 1 month of html/css and these tricks of js that shows and hide elements.</p>