jQuery mobile menu items get duplicated after clicking back button - jquery-mobile

Question

Using jQuery Mobile the code below works, however when I click on a menu item then click 'back' all my menu items have duplicated/appended etc.
$.each(siteData["pages"], function(i,v) {
$.mobile.activePage.find('[data-role=content]').append('' +
'<a href="#' + v["id"] +
'" data-role="button">' + v["name"] +
'</a>').trigger('create');
var newPage = $("<div data-role='page' id='" + v["id"] +
"'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
"data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
});
How can I stop this behavior?

Answer 1

I will make you a solution from your last question, it will be easier to understand
Take a look at working example: http://jsfiddle.net/Gajotres/3kPTf/
Basically before you add content you need to check if that constant already exist.
In your case each time you add a new button/page check if that button/page already exist like this:
if(!$('#second').length){
// In this case this code block will execute if button with an id second don't exist
}
And here's a code example:
$(document).on('pagebeforeshow', '#index', function(){
if(!$('#second').length){
$.mobile.activePage.find('[data-role=content]').append('Second').trigger('create');
var newPage = $("<div data-role='page' id='second'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
}
});