jquery - jQuery .on() クリック イベントは、別のボタンにバインドしている場合でも、数回発生するようです

Question

以下のコードを使用していますが、期待どおりに動作しません。次のボタンをクリックするとカウントアップし、戻るボタンをクリックするとカウントダウンします。

しかし、次にもう一度クリックすると、2 つのステップがスキップされます。私はこのページをもっとシンプルにすることを考えていますが、私の正気のために、ここで何が起こっているのか疑問に思っていました.

HTML:

<div id="one" class="tab">
    <h1>One</h1>

    <button id="one-back">Back</button>
    <button id="one-next">Next</button>
</div>
<div id="two" class="tab">
    <h1>Two</h1>

    <button id="two-back">Back</button>
    <button id="two-next">Next</button>
</div>
<div id="three" class="tab">
    <h1>Three</h1>

    <button id="three-back">Back</button>
    <button id="three-next">Next</button>
</div>
<div id="four" class="tab">
    <h1>Four</h1>

    <button id="four-back">Back</button>
    <button id="four-next">Next</button>
</div>

Javascript:

var checkout = {
     current: 0,
     init: function () {
        this.render();
     },
tab: [{
    id: 'one'
}, {
    id: 'two'
}, {
    id: 'three'
}, {
    id: 'four'
}],
render: function () {
    var self = this;
    $('#' + self.tab[self.current].id).show();

    $('#' + self.tab[self.current].id + '-back').on('click', function () {
        $('#' + self.tab[self.current].id).hide();

        if (self.current > 0) {
            self.current = self.current - 1;
        }

        self.render();
    });

    $('#' + self.tab[self.current].id + '-next').on('click', function () {
        $('#' + self.tab[self.current].id).hide();

        if (self.current <= 4) {
            self.current = self.current + 1;
        }

        self.render();
    });
}
};

$(document).ready(function () {
    checkout.init();
});

JSFiddle:

http://jsfiddle.net/cjheath/HNdD7/1/