Mustache.to_html not returning anything - html

Question

I have a total of (3) templates in my page and this overlay template is the third and final one. The first two are basically written the same as this template and they work fine. BUT For some reason, console.log(html) on this one returns nothing :
<!-- JSON -->
{ "art" : [{
"title" : "2 Intro-B",
"img_small" : "2 Intro-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "6 Bison-B",
"img_small" : "6 Bison-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "7 Cars-B",
"img_small" : "7 Cars-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}]}
<!-- HTML -->
<div id="overlay"></div>
----------------------------------------------
<!-- SCRIPT -->
<script id="overlayTmpl" type="text/template">
{{#overlayTemplate}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/overlayTemplate}}
</script>
<script type="text/javascript">
$(function(){
$.getJSON('/scripts/art.json', function(data) {
var overlaytmpl = $('#overlayTmpl').html();
var html = Mustache.to_html(overlaytmpl, data);
console.log(html);
$('#overlay').html(html);
});
});
</script>
** On the first two templates, the console.log(html) returns the html output just fine. I don't know why this one is hung up on something. JSON file has been validated...
Please help me from going insane. There must be a hex on this block of code. Anyone have a magic wand?

Answer 1

This may help you - Change your template like this:
<script id="overlayTmpl" type="text/template">
{{#art}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/art}}
</script>