How to hide only clicked button belonging to same class of buttons using Vanilla JS HTML CSS

Issue

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.

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.

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);
}

<button class="buttons">Test</button>
<button class="buttons">Test</button>
<button class="buttons">Test</button>
<button class="buttons">Test</button>

the above code is hiding all the buttons of the same class.

and if use only document.querySelector(".buttons").style.display = "none"

Then it is always hiding the first button no matter which button is pressed.

Edited Part:

 <div onclick="addToCart(${product.price})">
    <button class="b1" onclick="hideAddButton(this)" type="button">ADD</button>
  </div>
  <div onclick="addToCartRemove(${product.price})">
    <button class="b2 hidden" onclick="showRemoveButton(this)" type="button">Remove</button>
  </div>

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.

Solution

You can do this using onclick="yourfunction(this)" , please see snippet below.

Other solution is to use an event listener.

function HideClickedButton(x) {
      x.style.display = "none";
}

<div>
  <button onclick="HideClickedButton(this)" class="buttons">Button 1</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 2</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 3</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 4</button>
</div>

EDIT : Following your question in the comments, here is how to toggle display of button 1 when clicking button 8, and vice versa. It does not matter which class are the buttons because it is the onclick attribute that triggers the function, not their class.

function HideClickedButton(x) {
      var parent = x.parentNode;
      var index = [].indexOf.call(parent.children, x);
      //if clicked element is index 0 in parent element's children (button 1)
      if(index==0){
        //show element index 7 (button 8)
        parent.children[7].style.display = "inline-block"; 
      }
      //else if clicked element is index 7 in parent element's children (button 8)
      else if(index==7){
        //hide or show element index 0 (button 1)
        parent.children[0].style.display = "inline-block"; 
      }
      //we hide clicked button
        x.style.display = "none";
}

<div>
  <button onclick="HideClickedButton(this)" class="buttons">Button 1</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 2</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 3</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 4</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 5</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 6</button>
  <button onclick="HideClickedButton(this)" class="buttons">Button 7</button>
  <button onclick="HideClickedButton(this)" class="buttons_other_class">Button 8</button>
</div>

Answered By - Lucas Roquilly