[MR.TOR]

доброго времени суток.
Нашел вод такой скрипт
http://www.xiper.net/examples/html-a...lip-click.html

подскажите как сделать так чтобы можно было размещать не один блок а много (20-30).
т.е. понятно что у каждого блока будет свой идентификатор. но вот кнопка имеет только один индентификатор "button", вот

И скрипту не понятно какой блок повернуть на 180 градусов. а какой оставить нетронутым.

/* DOM Utility Functions from PastryKit */
Element.prototype.hasClassName = function (a) {
    return new RegExp("(?:^|\\s+)" + a + "(?:\\s+|$)").test(this.className);
};

Element.prototype.addClassName = function (a) {
    if (!this.hasClassName(a)) {
        this.className = [this.className, a].join(" ");
    }
};

Element.prototype.removeClassName = function (b) {
    if (this.hasClassName(b)) {
        var a = this.className;
        this.className = a.replace(new RegExp("(?:^|\\s+)" + b + "(?:\\s+|$)", "g"), " ");
    }
};

Element.prototype.toggleClassName = function (a) {
  this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a);
};
/* /DOM Utility Functions from PastryKit */

var init = function() {
	
	document.getElementById('button').addEventListener( 'click', function(){
    
		document.getElementById('card').toggleClassName('flip');
		
  }, false);
}

window.addEventListener( 'DOMContentLoaded', init, false);

такая унификация понадобится многим.
Помогите пожалуйста, сам бы сделал но в JS мало что понимаю.