title: JavaScript setAttribute ID to row is Undefined
body: <p>I am attempting to give each row that is dynamically added a unique ID. Basically by adding to the number each time the user clicks the add button. It is adding an ID, but not correctly, it is showing up as "undefined" in the dev tools. </p>
  
  <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>var counter = 0;
  function appendRow(id, style) {
    var table = document.getElementById(id); // table reference
    length = table.length,
    row = table.insertRow(table.rows.length, 'id');      // append table row
    row.setAttribute('id', style);
    row.setAttribute('idName', style);
    var i;
    // insert table cells to the new row
    for (i = 0; i &lt; table.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'cust' + counter);
        counter++
    }
  }
  
  function createCell(cell, text, style) {
    var div = document.createElement('div'), // create DIV element
        txt = document.createTextNode('_'); // create text node
    div.appendChild(txt);               // append text node to the DIV
    div.setAttribute('id', style);        // set DIV class attribute
    div.setAttribute('idName', style);    // set DIV class attribute for IE (?!)
    cell.appendChild(div);                   // append DIV to the table cell
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table { 
    text-align: center;
  }
  td { 
    width: 100px;
  }
  
  
  tr:nth-child(even) {
    background-color: #fff;
  }
  tr:nth-child(odd) {
    background-color: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="addCust" class="addSort" onclick="appendRow('custList')"&gt;add customer&lt;/button&gt;
  &lt;div class="custScroll"&gt;
          &lt;table id="custListTop" contenteditable="false"&gt;
            &lt;tr&gt;
              &lt;td style="border-top-left-radius: 5px;"&gt;Customers&lt;/td&gt;
              &lt;td style="border-top-right-radius: 5px;"&gt;Main Location&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
          &lt;table id="custList" contenteditable="true"&gt;
            &lt;tr&gt;
              &lt;td&gt;Someone&lt;/td&gt;
              &lt;td&gt;Somewhere&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>