jquery - jQueryUI ダイアログ ボタンを動的に変更する

Question

複数の jQuery UI dialog() ボタンをオンザフライで変更しようとしています。

以下のコードの問題は、dialog() の最初のインスタンスでボタンが 1 つしか表示されないことです。2 つのボタンが表示されます。

ここにjsFiddle：

$(function(){
    var dlg = $('#message');

    dlg.dialog({
        autoOpen:false,
        modal:true,
        width: 500,
        close: function() {
            if (seen==0 && ans > 0) {
                cnt++;
                seen++;
                dlg.html('Here is a second message');
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'OK',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
        }
    });

    $('#myDiv').hover(
        function() {
            //Hover-in
            if (cnt < 1 || (cnt > 2 && cnt < 4) || (cnt > 5 && cnt < 7)) {

                var msg = 'First display text goes here';
                dlg.html(msg);
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'Download',
                            click: function() {
                                ans++;
                                $(this).dialog('close');
                            },
                            text: 'Not now',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
            cnt++;
        },
        function() {
            //Hover-out
            //need this to prevent duplicating hover-in code (double-display dlg)
        }
    );

}); //END document.ready