title: JavaScript cloneNode: SELECT keeping some undesirable binding
body: <p>So, I have a simple table containing input elements and I need to dynamically add new rows to it.</p>
  
  <p>One of the cells contains a SELECT element and a list of OPTIONS which are replicated with cloneNode().</p>
  
  <p>The problem is: when I change any of the replicated SELECT elements, the index of the original SELECT also changes to that same value, like if there was some sort of "binding" left behind by the cloning process.</p>
  
  <p>My table looks something like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Header&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option&gt;Options&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The cloning routine is relatively complex, as I have to change cell IDs, element names and other things, but it boils down to something like this:</p>
  
  <pre><code>var table = document.querySelector('#table');
  var rows = table.querySelectorAll('tr');
  
  for (var x = 0; x &lt; 5; x++)
  {
  
      row = rows[1].cloneNode(true);
  
      // Changes everything that needs to be changed
  
      table.appendChild(row);
  
  }
  </code></pre>
  
  <p>Does anyone know what could be causing the original SELECT to be "bound" to the replicated ones?</p>
  
  <p>Thanks in advance!</p>