How to reference the DOM element knockout creates when foreach binding to an observableArray

How to reference the DOM element knockout creates when foreach binding to
an observableArray

When you click on one of the four buttons in this fiddle
http://jsfiddle.net/Fe8mT/
[Spades] [Hearts] [Diamonds] [Clubs]
knockout will add a new LI item to the UL corresponding to the "suit" of
the button. I would like to know how to reference the newly created LI
element in the self.addCard handler.
self.addCard = function (data,event) {
var card = event.currentTarget.id; // the button's id (S,
H, D, C)
self.hand.push(card);
};
I want to add a css class to the LI knockout creates when an item is
pushed onto the observableArray. If the [Spades] button was clicked,
adding a "spade" to the observableArray, I'll addClass("spades") to the
LI; if the [Hearts] button was clicked, I'll addClass("hearts").