Sheetrock.js not rendering in WordPress

I am using another CMS called Monstra and I am running Sheetrock.js (from here). I am in the process of trying to convert to WordPress (Test website) from Monstra (my current website) (needed some extra features) and Sheetrock isn’t working on my pages and I don’t know why.

I’ve been able to get the scripts to be called in the header by using the CSS & JavaScript Toolbox Plugin, but I am not sure how to get my table to show up.
This is the code I am trying to put into my home page.

<table  class="table table-condensed table-striped">
  <tr><td>{{cells.Run}}</td><td>{{formatDate cells.Date "long"}}</td><td>{{cells.Hare}}</td><td>{{cells.Location}}</td>
  <td>
  <a href="{{cells.Maplink}}"><button class="btn btn-info">Map link</button></a></td>
</tr>
</table>

My javascript from the Toolbox in HTML format:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="https://test.4x2h4.org/wp-includes/js/sheetrock.min.js"></script>
<script src="https://test.4x2h4.org/wp-includes/js/handlebars.min.js"></script>
<script src="https://test.4x2h4.org/wp-includes/js/moment.min.js"></script>

The Sheetrock script to call up the info from the Toolbox in HTML format:

<script>
// Sheetrock.js 1.0 Example 1
// https://chriszarate.github.io/sheetrock/
// The most basic use case of Sheetrock simply fetches the an
// entire worksheet and loads it into a <table>.
// Define spreadsheet URL.

/**
 * The CenterControl adds a control to the map that recenters the map on Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map, location) {

  // Set CSS for the control border
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to
  // Chicago
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(location)
  });

}

var myCallback = function (error, options, response) {
  if (!error) {
    /*
      Parse response.data, loop through response.rows, or do something with
      response.html.
    */

        var address = response.rows[1].cells.Location;

          geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(53.3496, -6.3263);
      var mapOptions =
      {
        zoom: 16,
        center: latlng
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      }

       geocoder.geocode( {address:address}, function(results, status)
      {
        if (status == google.maps.GeocoderStatus.OK)
        {
          map.setCenter(results[0].geometry.location);//center the map over the result
          //place a marker at the location
        // Create the DIV to hold the control and
  // call the CenterControl() constructor passing
  // in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, results[0].geometry.location);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

          var marker = new google.maps.Marker(
          {
              map: map,
              position: results[0].geometry.location
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
       }
      });
}; //end callback

 var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd
    }
    if(mm<10){
        mm='0'+mm
    }
    var today = yyyy+'-'+mm+'-'+dd;

  $(document).ready(function(){
  function get_numbers(input) {
    return input.match(/[0-9]+/g);
}

function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}
var DateFormats = {
       short: "DD MMMM - YYYY",
       long: "dddd, MMMM DD, YYYY"
};

Handlebars.registerHelper("formatDate", function(datetime, format) {
    if(datetime != "Date"){

    time_format = get_numbers(datetime);

var final_format = pad(time_format[0], 2)+"-"+pad(parseInt(time_format[1]) + 1 , 2)+"-"+pad(time_format[2], 2);

  if (moment) {
    // can use other formats like 'lll' too
    format = DateFormats[format] || format;
    return moment(final_format).format(format);
  }
  else {
    return datetime;
  }

}else{
    return "Date";
}
});

Handlebars.registerHelper('if_eq', function(a, b, opts) {
    if(a == b) // Or === depending on your needs
        return opts.fn(this);
    else
        return opts.inverse(this);
});

var RBITemplate = Handlebars.compile($('#handlebars-template').html());

var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1HQXajYPNn3AaaiA3X0A3NsDCRq7WjQzheDbLHsKrQyM/edit?gid=0';
// Load an entire worksheet.
$('#statistics').sheetrock({
url: mySpreadsheet,
query: "select  * where B >= date '"+today+"' order by B asc limit 1",
rowTemplate: RBITemplate,
callback : myCallback

});

});
</script>

Please assist. Thanks in advance.