title: JavaScript TypeError: Cannot read property 'id' of undefined
body: <h1>Preface:</h1>
  
  <p>I have an HTML table where user fills in Name and URL of social networks where they have account. Each row has a checkbox. With the help of jQuery and JavaScript, on pressing Add Row button, a row is dynamically added to the table and on pressing delete row button those rows are deleted for which checkbox is checked.</p>
  
  <h1>Objective:</h1>
  
  <p>When selected rows are deleted, I want to assign <code>id</code> to input elements and checkboxes of every remaining row in serial manner, so that the rows are always serially sound.</p>
  
  <h1>Problem:</h1>
  
  <p>I am not able to find what makes it throw error, as <code>childNodes[]</code> do not seem to lead to unavailable element. Please help!</p>
  
  <h1>Snippet:</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    // variable to keep track of rows(records)
      var social_recs_num = 1;
      $(document).ready(function () {
      
        $("#social_add_rec").click(function () {
      
          social_recs_num++;
          var markup = "&lt;tr&gt; &lt;th scope=\"row\"&gt; &lt;div class=\"form-group\"&gt; &lt;div class=\"form-check\"&gt; &lt;input type=\"checkbox\" class=\"form-check-input\" id=\"social_rec" + social_recs_num + "\" name=\"social_rec\"&gt; &lt;label class=\"form-check-label\" for=\"social_rec" + social_recs_num + "\"&gt; " + social_recs_num + "&lt;/label&gt; &lt;/div&gt;&lt;/div&gt;&lt;/th&gt; &lt;td&gt; &lt;div class=\"form-group shadow-sm\"&gt; &lt;label for=\"name_social" + social_recs_num + "\"&gt;Select or Type&lt;/label&gt; &lt;input type=\"text\" list=\"name_social" + social_recs_num + "\" class=\"form-control\" placeholder=\"Name\"&gt; &lt;datalist id=\"name_social" + social_recs_num + "\"&gt; &lt;option value=\"Wikipedia\"&gt;Wikipedia&lt;/option&gt; &lt;option value=\"Youtube\"&gt;Youtube&lt;/option&gt; &lt;option value=\"Facebook\"&gt;Facebook&lt;/option&gt; &lt;option value=\"Twitter\"&gt;Twitter&lt;/option&gt; &lt;option value=\"Pinterest\"&gt;Pinterest&lt;/option&gt; &lt;/datalist&gt; &lt;/div&gt;&lt;/td&gt;&lt;td&gt; &lt;div class=\"form-group shadow-sm\"&gt; &lt;textarea class=\"form-control\" id=\"url_social" + social_recs_num + "\" cols=\"30\" rows=\"1\" placeholder=\"URL\"&gt;&lt;/textarea&gt; &lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;"; //in case of id we need to do it like: "min_sysreq" +social_recs_num...as social_recs_num has been incremented priorly it will be the row number of row to be added
      
          $("table tbody").append(markup);
      
        });
      
        // Find and remove selected table rows...only condition is that there must be present attribute name='sysreq_rec' in input element for checkbox of every row
      
        $("#social_delete_rec").click(function () {
      
          $("table tbody").find('input[name="social_rec"]').each(function () {
      
            if ($(this).is(":checked")) {
              social_recs_num = social_recs_num - $(this).length;
              $(this).parents("tr").remove();
      
            }
      
          });
          // to be run when a row is deleted...this assigns ids to input elements in serial manner            
          var table = document.getElementById("mytab1");
          var rowCount = table.rows.length;
          
          // i has been initiated with 1, as header row is the 0th row
          for (var i = 1; i &lt; rowCount; i++) {
            var row = table.rows[i];
      
            // on this line, getting error: `Uncaught TypeError: Cannot read property 'id' of undefined`
            row.childNodes[0].childNodes[0].childNodes[0].childNodes[0].id = "social_rec" + i;
            row.childNodes[0].childNodes[0].childNodes[0].childNodes[1].for = "social_rec" + i;
            row.childNodes[0].childNodes[0].childNodes[0].childNodes[1].innerHTML = " " + i;
      
            row.childNodes[1].childNodes[0].childNodes[0].for = "name_social" + i;
            row.childNodes[1].childNodes[0].childNodes[1].list = "name_social" + i;
            row.childNodes[1].childNodes[0].childNodes[2].id = "name_social" + i;
      
            row.childNodes[2].childNodes[0].childNodes[0].id = "url_social" + i;
      
            //iterate through rows
            //rows would be accessed using the "row" variable assigned in the for loop
      
          }
      
        });
      
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table table-bordered" id="mytab1"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th scope="col"&gt;
              #
            &lt;/th&gt;
            &lt;th scope="col"&gt;
              Name
            &lt;/th&gt;
            &lt;th scope="col"&gt;
              URL
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;
              &lt;div class="form-group"&gt;
                &lt;div class="form-check"&gt;
                  &lt;input type="checkbox" class="form-check-input" id="social_rec1" name="social_rec"&gt;
                  &lt;label class="form-check-label" for="social_rec1"&gt; 1&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/th&gt;
            &lt;td&gt;
              &lt;div class="form-group shadow-sm"&gt;
                &lt;label for="name_social1"&gt;Select or Type&lt;/label&gt;
                &lt;input type="text" list="name_social1" class="form-control" placeholder="Name"&gt;
                &lt;datalist id="name_social1"&gt;
                  &lt;option value="Wikipedia"&gt;Wikipedia&lt;/option&gt;
                  &lt;option value="Youtube"&gt;Youtube&lt;/option&gt;
                  &lt;option value="Facebook"&gt;Facebook&lt;/option&gt;
                  &lt;option value="Twitter"&gt;Twitter&lt;/option&gt;
                  &lt;option value="Pinterest"&gt;Pinterest&lt;/option&gt;
                &lt;/datalist&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div class="form-group shadow-sm"&gt;
                &lt;textarea class="form-control" id="url_social1" cols="30" rows="1" placeholder="URL"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button class="btn btn-primary" type="button" id="social_add_rec"&gt;Add Row&lt;/button&gt;
      &lt;button class="btn btn-primary" type="button" id="social_delete_rec"&gt;Delete Row&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>P.S. :</h1>
  
  <ol>
  <li>I have used jQuery and Bootstrap.</li>
  <li><a href="https://stackoverflow.com/questions/41966001/javascript-type-error-childnodes-undefined">this</a> question seemed close, but I think I don't have the same mistake.</li>
  </ol>
  
  <h2>Edit:</h2>
  
  <p>I need to display(or store) inputs by user, for which I wrote following JavaScript code.</p>
  
  <pre><code>var social = function () {
  
      var val = "social:\n";
      for (x = 1; x &lt;= social_recs_num; x++) {
        //where social_recs_num is number of rows
        val = val + "\s\s-\n";
        val = val + "\s\s\s\s" + "name: " + getElementById("name_social" + x) + "\n";
        val = val + "\s\s\s\s" + "url: " + getElementById("url_social" + x) + "\n";
      }
  
      return val;
  
  }
  </code></pre>
  
  <p>function <code>social</code> returns the value input by user in YAML format. For this code, when selected rows are deleted, I want to assign <code>id</code> to input elements and checkboxes of every remaining row in serial manner.</p>