jQuery Mobile Dialogs content not changing

jQuery Mobile Dialogs content not changing

I have a list of receipts and a dialog that opens up with details when the
receipts are clicked:
function showReceipt( urlObj, options, receiptNumber) {
var pageSelector = urlObj.hash.replace( /\?.*$/, ""),
$page = $( pageSelector),
$header = $page.children( ":jqmData(role=header)" ),
$content = $page.children( ":jqmData(role=content)" ),
markup='';
markup += buildReceipt( receiptNumber, markup );
$header.find( "h1").html( receiptNumber);
$content.html( markup );
$page.page();
$content.find( ":jqmData(role=listview)" ).listview();
options.dataUrl = urlObj.href;
}
html file
<div id="receipt" data-role="dialog">
<div data-role="header"><h1></h1></div>
<div data-role="content">
</div>
</div>
It works fine when i click on the first receipt, but once i close the
dialog and click on another receipt, the details of the first receipt pop
up. I've tried various things like:
$("#receipt").on("pagehide", function() {
$("#receipt").jqmRemoveData(':jqmData(role=content)');
});
or
$("#receipt").on("pagehide", function() {
$("#receipt").empty();
});
and even
$("#receipt").on("pagehide", function() {
$("#receipt").remove();
});
but none seem to work. I've tested to see if he variables like receipt
number are correct when calling and there's no problem, the correct
variables are being passed.