jQuery Date Picker Stops Working

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<div id="theDIV">Date</div>
<button id="btn">REFRESH</button>

JavaScript

var dateHMTL = 'Date 1<input id="dt1" class="dt" /><br/>Date 2<input id="dt2" class="dt" /><br/>Date 3<input id="dt3" class="dt" /><br/>Date 4<input id="dt4" class="dt" /><br/>Date 5<input id="dt5" class="dt" />'
$(function () {
    $(document).on('focus', ".dt", function () {
        $(this).datepicker();
    });

    $(document).on("click", "#btn", function (e) {
        e.preventDefault();
        dateHMTL = $("#theDIV").html();
        dateHMTL=dateHMTL.replace(/Date (\d+)/g,"Date 1$1");
        dateHMTL=dateHMTL.replace(/dt(\d+)/g,"dt1$1");
        $("#theDIV").html(dateHMTL);
    });

    $("#theDIV").html(dateHMTL)
});