title: Cant sort html table using sorttable.js
body: <p>Im having trouble trying to sort a dynamically created html table. I create it using jade/pug. I am trying to use the sorttable.js script found here <a href="http://www.kryogenix.org/code/browser/sorttable/" rel="nofollow">http://www.kryogenix.org/code/browser/sorttable/</a> . I am still kind of new to html/javascript. So if there is some obvious reason why its not working could someone point it out please? </p>
  
  <p>Here is some of the html code generated from the template </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
     &lt;script src="/path/to/sorttable.js"&gt;&lt;/script&gt;
     &lt;style&gt;
      th.clickable:hover
      {
       color:green
      }    
      th, td
      {
       padding:5px;
      }
      th.clickable
      {
       cursor: pointer;    
      }
    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;script&gt;
    var newTableObject = document.getElementById(tbl)
    sorttable.makeSortable(newTableObject)
   &lt;/script&gt;
   &lt;table class="sortable" id="tbl"&gt;
    &lt;tr&gt;
     &lt;th class="clickable"&gt;id&lt;/th&gt;
     &lt;th class="clickable"&gt;value&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;100&lt;/td&gt;
    &lt;td&gt;100&lt;/td&gt;
   &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;200&lt;/td&gt;
    &lt;td&gt;200&lt;/td&gt;
   &lt;/tr&gt; 
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;   
  </code></pre>
  
  <p>The goal is to have it so when I click on the header it sorts the table by that column.    </p>