I can up with this which might help:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
patient=new Object();
patient.id=12345;
patient.name="Jane Doe";
var output = "";
//var output = "<li id=12345><a href='#update?patient=12345'><h2>Jane Doe</h2><a href='#' data-rel='popup' data-position-to='window' data-transition='pop'></a></li> ";
output += "<li id=" + patient.id + "><a href='#update?patient=" + patient.id + "'><h2>" + patient.name + "</h2><a href='#' data-rel='popup' data-position-to='window' data-transition='pop'></a></li>";
console.log(output);
});
</script>
</head>
<body>
<p>This is a paragraph with little content.</p>
</body>
</html>
So if you look in console.log, you get:
<li id=12345><a href='#update?patient=12345'><h2>Jane Doe</h2><a href='#' data-rel='popup' data-position-to='window' data-transition='pop'></a></li>
Just 2 things I see is output really +=
Also I choose patient.id = A number as an example and then I read this:
The id attribute value must begin with a letter in the roman alphabet (a–z or A–Z); this can be followed by any combination of letters (a–z or A–Z), digits (0–9), hyphens (-), underscores (_), colons (:), and periods (.). The id value is case sensitive, thus <span id="me">This is me</span> and <span id="ME">This is me</a> would be considered to be separate and uniquely identifiable elements on the same web page.
So maybe the id is messing things up?
so a choose