Currently experimenting with Handlebars templates within my express/node.js application. I have created a template and corresponding .js files, but unfortunately, they are not functioning as expected. While the page correctly displays the unordered list's 3 bullets, it does not populate them with data. There are no errors being shown in my console or terminal. Can anyone shed light on what might be causing this issue?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="javascript/templating.js"></script>
</head>
<h1>Greetings World</h1>
<script id="handlebars-test" type="text/x-handlebars-template">
<ul>
<li>{{firstName}}</li>
<li>{{twitter}}</li>
<li>{{jobTitle}}</li>
</ul>
</script>
<div id="main"></div>
$(document).ready(function() {
console.log('Hey there!');
var source = $("#handlebars-test").html();
var template = Handlebars.compile(source);
var data = {
twitter: 'HelloWorld',
jobTitle: 'Champion',
firstName: 'hello'
}
console.log(data);
$("#main").append(template(data));
});