title: 2 or more Tiny Tables in one html page
body: <p>How can I use two or more tiny table plugin in one html page? I made a separate php file per table but when I included the .php files in the main page, the only working table is the first one. </p>
  
  <p>1st Example</p>
  
  <pre><code>&lt;link rel="stylesheet" href="../javascript/tinytable2/style.css"/&gt;
  &lt;div id="tablewrapper"&gt;
  
      &lt;div id="tableheader"&gt;
  
          &lt;div class="search"&gt;
  
              &lt;select id="columns_areaLeader" onchange="sorter.search('query_areaLeader')"&gt;&lt;/select&gt;
  
              &lt;input type="text" id="query_areaLeader" onkeyup="sorter.search('query_areaLeader')" /&gt;
  
          &lt;/div&gt;
  
          &lt;span class="details"&gt;
  
              &lt;div&gt;Records &lt;span id="startrecord_areaLeader"&gt;&lt;/span&gt;-&lt;span id="endrecord_areaLeader"&gt;&lt;/span&gt; of &lt;span id="totalrecords_areaLeader"&gt;&lt;/span&gt;&lt;/div&gt;
  
              &lt;div&gt;&lt;a href="javascript:sorter.reset()"&gt;reset&lt;/a&gt;&lt;/div&gt;
  
          &lt;/span&gt;
  
      &lt;/div&gt;
      &lt;table cellspacing='0' id='table_areaLeader' cellpadding='0' class='tinytable'&gt;&lt;/table&gt;
       &lt;div id="tablefooter"&gt;
       &lt;div id="tablenav_areaLeader"&gt;
       &lt;div&gt;
  
  
       &lt;/div&gt;
  
              &lt;div&gt;
  
                  &lt;select id="pagedropdown_areaLeader"&gt;&lt;/select&gt;
  
              &lt;/div&gt;
  
              &lt;div&gt;
  
                  &lt;a href="javascript:sorter.showall()"&gt;view all&lt;/a&gt;
  
              &lt;/div&gt;
  
             &lt;/div&gt;
  
          &lt;div id="tablelocation"&gt;
  
              &lt;div&gt;
  
                  &lt;select onchange="sorter.size(this.value)"&gt;
  
                  &lt;option value="5"&gt;5&lt;/option&gt;
  
                      &lt;option value="10" selected="selected"&gt;10&lt;/option&gt;
  
                      &lt;option value="20"&gt;20&lt;/option&gt;
  
                      &lt;option value="50"&gt;50&lt;/option&gt;
  
                      &lt;option value="100"&gt;100&lt;/option&gt;
  
                  &lt;/select&gt;
  
                  &lt;span&gt;Entries Per Page&lt;/span&gt;
  
              &lt;/div&gt;
  
              &lt;div class="page"&gt;Page &lt;span id="currentpage_areaLeader"&gt;&lt;/span&gt; of &lt;span id="totalpages_areaLeader"&gt;&lt;/span&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;/div&gt;
  </code></pre>
  
  <p>
          </p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
  var sorter = new TINY.table.sorter('sorter','table_areaLeader',{
  
      headclass:'head',
  
      ascclass:'asc',
  
      descclass:'desc',
  
      evenclass:'evenrow',
  
      oddclass:'oddrow',
  
      evenselclass:'evenselected',
  
      oddselclass:'oddselected',
  
      paginate:true,
  
      size:10,
  
      colddid:'columns_areaLeader',
  
      currentid:'currentpage_areaLeader',
  
      totalid:'totalpages_areaLeader',
  
      startingrecid:'startrecord_areaLeader',
  
      endingrecid:'endrecord_areaLeader',
  
      totalrecid:'totalrecords_areaLeader',
  
      hoverid:'selectedrow_areaLeader',
  
      pageddid:'pagedropdown_areaLeader',
  
      navid:'tablenav_areaLeader',
  
      sortcolumn:1,
  
      sortdir:1,
  
      sum:[8],
  
      avg:[6,7,8,9],
  
      columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
  
      init:true
  
           });
  
         &lt;/script&gt;
  </code></pre>
  
  <p>2nd Exapmple</p>
  
  <p></p>
  
  
  
          
  
              
  
                  
  
                  
  
              
  
              
  
                  Records - of 
  
                  reset
  
              
  
          
  
         
           
           
  
  
                  
  
                      
  
                  
  
                  
  
                      view all
  
                  
  
      
  
              
  
                  
  
                      
  
                      5
  
                          10
  
                          20
  
                          50
  
                          100
  
                      
  
                      Entries Per Page
  
                  
  
                  Page  of 
  
              
  
          
  
      
  
  <p></p>
  
  <pre><code>     &lt;script type="text/javascript" src="../javascript/tinytable/script.js"&gt;&lt;/script&gt;
  
         &lt;script type="text/javascript"&gt;
  
  var sorter = new TINY.table.sorter('sorter','table_parishPriest',{
  
      headclass:'head',
  
      ascclass:'asc',
  
      descclass:'desc',
  
      evenclass:'evenrow',
  
      oddclass:'oddrow',
  
      evenselclass:'evenselected',
  
      oddselclass:'oddselected',
  
      paginate:true,
  
      size:10,
  
      colddid:'columns_parishPriest',
  
      currentid:'currentpage_parishPriest',
  
      totalid:'totalpages_parishPriest',
  
      startingrecid:'startrecord_parishPriest',
  
      endingrecid:'endrecord_parishPriest',
  
      totalrecid:'totalrecords_parishPriest',
  
      hoverid:'selectedrow',
  
      pageddid:'pagedropdown_parishPriest',
  
      navid:'tablenav',
  
      sortcolumn:1,
  
      sortdir:1,
  
      sum:[8],
  
      avg:[6,7,8,9],
  
      columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
  
      init:true
  
  });
  
        &lt;/script&gt;
  </code></pre>