title: Adding rows to multiple tables dynamically on one web page using Javascript
body: <p>This one is probably my lack of experience with html5, but I have some code that works great for adding rows dynamically to a table using Javascript and the TBODY tag node, but when I have more than one table (which I do) on the page that I need to fill dynamically as data is entered....it doesn't work...</p>
  
  <p>My issue is I can't figure out how to refer to the section I want to add the information too. </p>
  
  <p>I tried creating a node with a specific tag, but it's not a recognized tag, so it added the data but not inside the table...oddly.</p>
  
  <p>Here's the Javascript code I'm using</p>
  
  <pre><code>document.getElementById("sendNoteToDispatch").onclick=function()
      {
          event.preventDefault();
          console.log("Made it to note entry.");
          var noteTxt = $('#noteEntry').val();
          var noteEntBy = 'BGM';
          var nowNote = Date();
          var noteEntDate = dateFormat(nowNote, "mm/dd/yyyy HH:MM:ss");
          if (!document.getElementsByTagName) return;
          tabBody=document.getElementsByTagName("TBODY").item(0);
          row=document.createElement("TR");
          cell1=document.createElement("TD");
          cell2=document.createElement("TD");
          cell3=document.createElement("TD");
          textnode1=document.createTextNode(noteEntDate);
          textnode2=document.createTextNode(noteEntBy);
          textnode3=document.createTextNode(noteTxt);
          cell1.appendChild(textnode1);
          cell2.appendChild(textnode2);
          cell3.appendChild(textnode3);
          row.appendChild(cell1);
          row.appendChild(cell2);
          row.appendChild(cell3);
          tabBody.appendChild(row);
          document.getElementById("noteEntry").value = '';
          document.getElementById("noteEntry").focus();
         }
  
  });
  </code></pre>
  
  <p>Here's the html code it works with. </p>
  
  <pre><code>&lt;div id="Notes" class='acceptEnterNotes'&gt;
              &lt;form&gt;
                  &lt;input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="115" /&gt;
                  &lt;button type="submit" id="sendNoteToDispatch" class="noteEntryButton buttonAddNote" value="Submit"&gt;
                      Submit Note
                  &lt;/button&gt;
              &lt;/form&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;div id="filterNotesGriddiv"&gt;
                  &lt;input type="text" name="filterNotesGrid" id="filterNotesGrid" class="tableFilterInput" size="75" placeholder="Search the Table Below..." /&gt;
              &lt;/div&gt;
              &lt;div id="notesEntered"&gt;
                  &lt;table id="notesEnteredGrid" class="lowerSectionTable"&gt;
                      &lt;tbody&gt;
                          &lt;tr class="enteredNotesHeader"&gt;
                              &lt;td class="tableHeaderCells cellDateEntered"&gt;Date Entered&lt;/td&gt;&lt;td class="tableHeaderCells cellEnteredBy"&gt;Entered by&lt;/td&gt;&lt;td class="tableHeaderCells cellNoteEntered"&gt;Note&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>I tried changing the tbody tag, to something like tbodyNotes, but that didn't work, then I tried adding an ID to tbody node, but that didn't work either...so anything that can help, so that I can add another section with a different table... would be awesome.</p>