Maintain order of elements in event callback

Maintain order of elements in event callback

I have a series of radio-style button groups (made using Bootstrap), each
of them is labelled a letter. Depending on the clicked button, the
associated letter should be placed within either 'Yes' or 'No' rows. For
example, clicking Yes button associated with label A should make A appears
in 'Yes' row. Here is a fiddle to illustrate the idea:
http://jsfiddle.net/A38Ap/
I should point out that the 'click' event callback is fired before the
.active class is added to the clicked button in Bootstrap.
An additional requirement is that the order of letters in 'Yes' and 'No'
row should respect the order of button groups shown above. For example, if
'Yes' is clicked for both C and A, no matter in which order they are
clicked, C should always appear before A in the 'Yes' row, because C group
is in front of A group (left-to-right).
The fiddle above does NOT satisfy this additional requirement, and I
struggle to think of an efficient way to do it. Any suggestion?