multiple flip cards with two button

Question

I have multiple stack of cards with two button one to flip the current ( top) car and the second to add a fallen effect class could not the button to work please help

  const cards = document.querySelectorAll(".card")

    const flipBtn=document.querySelectorAll('.fliping')
    flipBtn.forEach(function(item){
        item.addEventListener('click',function(){

            // cards.forEach(function(card){
            //   this.classList.toggle('flipcard')
            // })
        })

    })

    document.querySelectorAll('.delete').forEach(function(item) {
  item.addEventListener('click', function(e) {
    // console.log("jjjj")
    // let newClass = this.getAttribute('data-delete');
    // let getParent = parent(this, '.item', 1);
    // console.log(getParent)
    cards.classList.add('fall');

  });
}); 
 const cards = document.querySelectorAll(".card")

    const flipBtn=document.querySelectorAll('.fliping')
    flipBtn.forEach(function(item){
        item.addEventListener('click',function(){

            // cards.forEach(function(card){
            //   this.classList.toggle('flipcard')
            // })
        })

    })

    document.querySelectorAll('.delete').forEach(function(item) {
     item.addEventListener('click', function(e) {
    // console.log("jjjj")
    // let newClass = this.getAttribute('data-delete');
    // let getParent = parent(this, '.item', 1);
    // console.log(getParent)
    cards.classList.add('fall');

  });
});

could not get the buttons to work

Answer 1

I think there is some issue in your code. I rewrite javascript code as :

const cards = document.querySelectorAll(".card");
const flipBtns = document.querySelectorAll('.fliping');
const deleteBtns = document.querySelectorAll('.delete');

flipBtns.forEach(function(flipBtn) {
  flipBtn.addEventListener('click', function() {
    const card = this.closest('.card');
    card.classList.toggle('flipcard');
  });
});

deleteBtns.forEach(function(deleteBtn) {
  deleteBtn.addEventListener('click', function() {
    const card = this.closest('.card');
    card.classList.add('fall');
  });
});

In the above code firstly I have create constants for cards , flip buttons and delete buttons .After that I have added click event listener. Also if you share html part as well then it would be more clear for me to solve your problem.