title: Unable to properly add TR to HTML from JS script
body: <p>I keep getting an indexing error while trying to add TR tags to my HTML using the innerHTML attribute. This is what the JS script looks like.</p>
  <pre><code>var myTbody = document.querySelector(&quot;.table&quot;);
  
  var button = document.querySelector(&quot;.add-stock&quot;);
  var input = document.querySelector(&quot;.stock-input&quot;);
  
  button.addEventListener(&quot;click&quot;, function () {
    var td = document.querySelectorAll(&quot;td&quot;);
  
    var row = myTbody.insertRow(td.length + 1);
    var cell_univeral = row.insertCell(td.length - 1);
    cell_univeral.innerHTML = input.value;
  });
  </code></pre>
  <p>And this is the related html document:</p>
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Technical&lt;/title&gt;
      &lt;script
        src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot;
        integrity=&quot;sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=&quot;
        crossorigin=&quot;anonymous&quot;
      &gt;&lt;/script&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;{{url_for('static', filename='css/technical.css')}}&quot;
      /&gt;
      &lt;link
        href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot;
        rel=&quot;stylesheet&quot;
        integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot;
        crossorigin=&quot;anonymous&quot;
      /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;/&quot;&gt;Home&lt;/a&gt;
          &lt;button
            class=&quot;navbar-toggler&quot;
            type=&quot;button&quot;
            data-bs-toggle=&quot;collapse&quot;
            data-bs-target=&quot;#navbarNavAltMarkup&quot;
            aria-controls=&quot;navbarNavAltMarkup&quot;
            aria-expanded=&quot;false&quot;
            aria-label=&quot;Toggle navigation&quot;
          &gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNavAltMarkup&quot;&gt;
            &lt;div class=&quot;navbar-nav&quot;&gt;
              &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Technical&lt;/a&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Alpha-Beta&lt;/a&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Partition&lt;/a&gt;
              &lt;a class=&quot;nav-link disabled&quot;&gt;More&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;div class=&quot;top-form&quot;&gt;
            &lt;form action='#' method=&quot;post&quot;&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                &lt;label for=&quot;exampleInputEmail1&quot; class=&quot;form-label&quot;
                  &gt;Ticker Symbols&lt;/label
                &gt;
                &lt;input
                  type=&quot;text&quot;
                  class=&quot;form-control stock-input&quot;
                  id=&quot;exampleInputEmail1&quot;
                  aria-describedby=&quot;emailHelp&quot;
                  name=&quot;nm&quot;
                /&gt;
  
                &lt;div id=&quot;symbol&quot; class=&quot;form-text&quot;&gt;Add stocks one at a time&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;buttons&quot;&gt;
                &lt;div class=&quot;add-button&quot;&gt;
                 &lt;button type=&quot;button&quot; class=&quot;btn btn-success add-stock&quot;&gt;Add&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class=&quot;submit-button&quot;&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary submit-btn&quot;&gt;
                Submit
              &lt;/button&gt;
                        &lt;div class=&quot;spinner-border my-spinner hidden&quot; role=&quot;status&quot;&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class=&quot;bottom-from&quot;&gt;
            &lt;table class=&quot;table table-hover&quot;&gt;
              &lt;thead&gt;
                &lt;th&gt;Symbol &lt;span class=&quot;counter&quot;&gt;&lt;/span&gt;&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody class=&quot;table-body&quot;&gt;
               
          
               
              &lt;/tbody&gt;
            &lt;/table&gt;
  
          
            &lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
              It may take longer for multiple stocks
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src=&quot;{{url_for('static', filename='script/technical.js')}}&quot;
      /&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Note that for the first two click events i have no problems whatsoever though i get this error when i click again</p>
  <pre><code>Uncaught DOMException: Index or size is negative or greater than the allowed amount
  </code></pre>
  <p>It seems like I'm trying to change the innerHTML of an item that is out of range but i honestly don't know what the actual problem is and how to fix it. Thank you for your help</p>