Sheetrock not working: $ is not defined

Hello, everyone, I'm new to GitHub and to programming in general - hope to learn a lot and improve!

I run a website that requires lots of data that I tediously copy-paste from google sheets into fancy CSS preformatted tables. I have recently found Sheetrock.js and want to make my information from Google Sheets behave to a similar fashion of Ico Alert (https://www.icoalert.com/).

From my rookie understanding, I would be able to place the information into <div> tags with custom styling and Javascript for mouseover/off animations.

Everything seemed ok when I tried this in jsFiddle on Sheetrock website (yes, I managed to put the information into <divs>). Then I wanted to replicate this on my own in Sublime but I encountered a problem. Whenever I run the page, nothing appears and the console says the following:

Uncaught ReferenceError: $ is not defined at sheets.html:8 (anonymous) @ sheets.html:8

I open up the code and the fault is in this line:

var HRTemplate = Handlebars.compile($('#hr-template').html());

I use the links provided on Sheetrock website with Handlebars CDN yet it shows that $ is undefined. Maybe there is a fault in the code or am I doing something wrong on my side?

I write everything in a single sublime sheet, no external Javascript files. Also, I wll want to include Bootstrap as well.

Thank you for your help!

My code is this:

<!DOCTYPE html>
<html>
<head>
<script src="http://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
    <script>
        var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1mzj7q17289MZUXveKa3Dn8xbsCJLu-_qxUHoeBwaYw8/edit#gid=1420307382';
        var HRTemplate = Handlebars.compile($('#hr-template').html());
$('#hr').sheetrock({
  url: mySpreadsheet,
  fetchSize: 5,
  rowTemplate: HRTemplate
});
    </script>
</head>
<body>
<h4>ICOs</h4>
<ol id="hr">
  <script id="hr-template" type="text/x-handlebars-template">
    <li>
      <strong>{{cells.Name}}</strong>
    </li>
  </script>
</ol>
</body>
</html>

chriszarate / sheetrock

Sheetrock not working: $ is not defined #125