title: How to hide only clicked button belonging to same class of buttons using Vanilla JS HTML CSS
body: <p>I am stuck with situation where I am rendering a data.json into HTML using JS.
  Everything is working fine. Json data is rendered into html using loop which results in multiple objects having same class.</p>
  <p>Because of this every button I created belongs to same class in loop.
  Now the question; I want to hide only specific button that is clicked and not all the buttons of the class.</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>var X = document.getElementsByClassName("buttons");
  function HideClickedButton() {
  
    for (let x of X) {
      if (x.style.display === "none") {
        x.style.display = "block";
      
      } else {
        x.style.display = "none";
      }
    }
  }
  
  for (const button of X) {
      button.addEventListener('click', HideClickedButton);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="buttons"&gt;Test&lt;/button&gt;
  &lt;button class="buttons"&gt;Test&lt;/button&gt;
  &lt;button class="buttons"&gt;Test&lt;/button&gt;
  &lt;button class="buttons"&gt;Test&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>the above code is hiding all the buttons of the same class.</p>
  <p>and if use only <code>document.querySelector(&quot;.buttons&quot;).style.display = &quot;none&quot;</code></p>
  <p>Then it is always hiding the first button no matter which button is pressed.</p>
  <p><strong>Edited Part:</strong></p>
  <pre><code> &lt;div onclick=&quot;addToCart(${product.price})&quot;&gt;
      &lt;button class=&quot;b1&quot; onclick=&quot;hideAddButton(this)&quot; type=&quot;button&quot;&gt;ADD&lt;/button&gt;
    &lt;/div&gt;
    &lt;div onclick=&quot;addToCartRemove(${product.price})&quot;&gt;
      &lt;button class=&quot;b2 hidden&quot; onclick=&quot;showRemoveButton(this)&quot; type=&quot;button&quot;&gt;Remove&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  <p>So. my code is something like this in JS which is basically rendering list from JSON. After rendering, totals buttons are 12.
  In a group of 6 (see image). Now, I don't want to show remove button initially. It will only show when corresponding ADD button is clicked. When ADD button is clicked it will hide and Remove button will takes it place while other ADD buttons remains the same. Please let me know if you understand.<a href="https://i.stack.imgur.com/8A5Ht.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8A5Ht.png" alt="enter image description here" /></a></p>