jquery - Javascript: Multiple buttons, 1 class, cannot use ids. Pressing 1 button changes THEM ALL -

i hoping can please me out here. i've been struggling 3 days. :)

i new wordpress-woocommerce & php, theme using not show "signs" when item added cart ajax cart. not programming, created javascript try , conquer issue. unfortunately, right if click 1 button, buttons change.

i code apply button actively being clicked.

the main criteria:

• the buttons cannot have separate ids. must use class alone
• buttons dynamically generated each product, , number of products-per-page unpredictable
• something like, "onclick="this.innerhtml='hi stack!'" cannot used think (it breaks category page)

this pen of have far including html, css, , js: http://codepen.io/xkurohatox/pen/enbmkb

html

    <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">add cart</a> <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">add cart</a> <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">add cart</a> <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">add cart</a> 

in actuality, number of buttons can range maybe 1-2000 @ time.

css

    .button.add_to_cart_button.product_type_simple.added {color:yellow;} 

js

     function birds(){ var = document.queryselectorall('.button.add_to_cart_button.product_type_simple.added' ), i;      (i = 0; < a.length; ++i) {      a[i].style.color = "pink";      a[i].innerhtml="success";      }     settimeout ( 'cats()', 2000 );    }     function cats(){       var = document.queryselectorall('.button.add_to_cart_button.product_type_simple.added'        ), i;       (i = 0; < a.length; ++i) {      a[i].style.color = "red";     a[i].innerhtml="add cart";        }      } 

here page element inspector: http://s.codepen.io/xkurohatox/debug/enbmkb?

i have visited site many times, never joined until now. thank in advance help! =)

in pure javascript, can

1) change onclick="birds()" onclick="birds(this)"

2) in birds function, receive anchor parameter , change styles of anchor, instead of iterate on anchors.

function birds(btn){        btn.style.color = "pink";      btn.innerhtml="success";          settimeout ( function() {           cats(btn);      }, 2000 );  }    function cats(btn){      btn.style.color = "red";      btn.innerhtml="add cart";  }

.button.add_to_cart_button.product_type_simple.added {      color:yellow;  }

<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">add cart</a>  <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">add cart</a>  <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">add cart</a>  <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">add cart</a>