The following code is opening a jQuery dialog. I wish to move one of the labels (id as EventTime) close to the dialog buttons, at the bottom.

The code:

$("#FireAlert").dialog("open");
$(".ui-dialog-buttonpane").append($("#EventTime"));
function pad(val) {
    return val > 9 ? val : "0" + val;
}
eventTimer = setInterval(function () {
    $("#EventTime").text("Event time - " + pad(parseInt(eventSeconds / 3600 % 60, 10)) + ":" + pad(parseInt(eventSeconds / 60 % 60, 10)) + ":" + pad(++eventSeconds % 60));
}, 1000);

When pausing the timer and inspecting the label, it has the right text, but it is not updating in the browser, i.e. it's still showing the initialized text.

When omitting the append command, the label is updating correctly.

Sample here - https://jsfiddle.net/8s9pceg4