(function () { document.addEventListener('DOMContentLoaded', function () { var $rec = $('#reconciliation .reconciliation-example'); if (!$rec.length) { return; } var state = 0; var operations = [ function reconcile2() { $rec.addClass('reconcile2'); return 1; }, function reconcile1() { $rec.addClass('reconcile1'); return 2; }, function unreconcile() { $rec.removeClass('reconcile1 reconcile2'); $1.add($2).removeClass('reconciled'); setTimeout(update_btn, 0); return 0; } ]; var $buttons = $('
').on('click', 'button', function () { this.disabled = true; state = operations[state](); }).appendTo($rec); var $1 = $rec.find('td:contains("Invoice 1"), td:contains("Payment 1")') .parent() .addClass('invoice1'); var $2 = $rec.find('td:contains("Invoice 2"), td:contains("Payment 2")') .parent() .addClass('invoice2'); // will be called multiple times (each tr + each td), only take trs in // account $rec.on('animationend webkitAnimationEnd MSAnimationEnd', function (e) { switch (e.originalEvent.target) { case $1[0]: $1.addClass('reconciled'); break; case $2[0]: $2.addClass('reconciled'); break; } update_btn(); }); update_btn(); function update_btn() { var $reconcile = $('