title: Javascript: Count number of table rows for each table and return a value to corresponding elements
body: <p>I have three tables on a web page. Each table has a corresponding element nested in <code>&lt;thead&gt;</code> tags that I need to reflect the number of rows in its respective table, minus the head row and bottom row (-2). When I'm working with a single table, this code works just fine:</p>
  
  <p>HTML Table Snippet:</p>
  
  <pre><code>&lt;table class="table" id="category"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;&lt;i class="fa fa-hashtag"&gt;&lt;/i&gt; headache - &lt;label class="label label-primary" id="tableBadge"&gt;0&lt;/span&gt;&lt;/th&gt;
                &lt;th&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt; Date Added&lt;/th&gt;
                &lt;th&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt; Options&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Test entry&lt;/td&gt;
                &lt;td&gt;1/19/2016&lt;/td&gt;
                &lt;td&gt;
                &lt;a href="#" class="btn btn-success btn-xs"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a href="#" class="btn btn-primary btn-xs"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a href="#" class="btn btn-danger btn-xs"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;a href="#" class="btn btn-default btn-xs"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; add entry&lt;/a&gt;&lt;/td&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function catCount() {
      var rows = document.getElementById("category").rows.length;
      document.getElementById("tableBadge").innerHTML = rows - 2 + " entries";
  }
  </code></pre>
  
  <p>However, respecting the laws of HTML in that ID's are unique to an element, I'm left in a bind. Using <code>getElementsByClassName()</code> or <code>getElementsByTagName()</code>  the values return 0, telling me it's not working. At least using identical syntax.</p>
  
  <p>I've searched Google et al. for a solution, but they seem to be tailored towards the total amount of rows, rather individual counts respective of their tables.</p>
  
  <p>Any help would be appreciated. Thank you in advance.</p>