title: Row count in dynamically generated table using JQuery
body: <p>I've a table with header and footer and a default row already created. When I add more rows dynamically I don't get the exact row count. It always returns the correct row count if I add them before.</p>
  
  <p>Below is the code I've written -</p>
  
  <pre><code>    &lt;table id="empTable" class="table table-responsive table-striped table-bordered"&gt;
                      &lt;thead&gt;`enter code here`
                          &lt;tr&gt;
                              &lt;td&gt;Name of Employee&lt;/td&gt;
                              &lt;td&gt;Father's Name/Husband's Name&lt;/td&gt;
                              &lt;td&gt;Basic&lt;/td&gt;
                              &lt;td&gt;Total attendance&lt;/td&gt;
                              &lt;td&gt;Clear&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="TextBoxContainer"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input name="DynamicTextBox" type="number" value="" class="form-control" /&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input name="DynamicTextBox" type="number" value="" class="form-control" /&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;button type="button" class="btn btn-danger remove"&gt;&lt;i class="glyphicon glyphicon-remove-sign"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
                          &lt;/tr&gt;              
  
                      &lt;/tbody&gt;
                      &lt;tfoot&gt;
                          &lt;tr&gt;
                              &lt;th colspan="5"&gt;
                                  &lt;button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"&gt;&lt;i class="glyphicon glyphicon-plus-sign"&gt;&lt;/i&gt;&amp;nbsp; Add&amp;nbsp;&lt;/button&gt;&lt;/th&gt;
                          &lt;/tr&gt;
  
                      &lt;/tfoot&gt;
                  &lt;/table&gt;
  
  &lt;script&gt;
  
              //function to add/remove rows
              $(function() {
  
                  $("#btnAdd").bind("click", function() {
                      var div = $("&lt;tr /&gt;");
                      div.html(GetDynamicTextBox(""));
                      $("#TextBoxContainer").append(div);
                  });
                  $("body").on("click", ".remove", function() {
  
                      $(this).closest("tr").remove();
  
                  });
              });
  
  
              //function to return value of Dynamic content
              function GetDynamicTextBox(value) {
                  return '&lt;td&gt;&lt;input name="DynamicTextBox" type="text" value="" class="form-control" /&gt;&lt;/td&gt;' +
                      '&lt;td&gt;&lt;input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /&gt;&lt;/td&gt;' +
                      '&lt;td&gt;&lt;input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /&gt;&lt;/td&gt;' +
                      '&lt;td&gt;&lt;input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /&gt;&lt;/td&gt;' +
                      '&lt;td&gt;&lt;button type="button" class="btn btn-danger remove"&gt;&lt;i class="glyphicon glyphicon-remove-sign"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;'
              }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And I'm using this line to return row count but it's not working -</p>
  
  <pre><code> var rowCount = document.getElementById("TextBoxContainer").rows.length;
              $('#btnSave').on('click', function() {
                  alert(rowCount);
  
              })
  </code></pre>
  
  <p>I've tried all the solutions from stackoverflow but not getting why it's not working for dynamic rows whereas same code I saw in a fiddle working. </p>
  
  <p>Please help.</p>