javascript - Maintain order of elements in event callback -


i have series of radio-style button groups (made using bootstrap), each of them labelled letter. depending on clicked button, associated letter should placed within either 'yes' or 'no' rows. example, clicking yes button associated label a should make a appears in 'yes' row. here fiddle illustrate idea: http://jsfiddle.net/a38ap/

i should point out 'click' event callback fired before .active class added clicked button in bootstrap.

an additional requirement order of letters in 'yes' , 'no' row should respect order of button groups shown above. example, if 'yes' clicked both c , a, no matter in order clicked, c should appear before a in 'yes' row, because c group in front of a group (left-to-right).

the fiddle above not satisfy additional requirement, , struggle think of efficient way it. suggestion?

for each button - in onclick event of buttons, toggle 'active' class on button clicked.

at end of end loop through buttons decide have been clicked, , display status accordingly. looping @ end, give advantage of knowing state of buttons before print state of buttons. printing in last step can maintain order need.