title: Capturing cloned row values for AJAX send
body: <p>I currently have a simple table with 4 columns and one row. The user can fill in the data for the 4 columns and submit my javascript function finds the value based on the id. Simple. The user also has the option to add another row and input more data. When the row is cloned it maintains the ID of the parent row. </p>
  
  <p>Where I am running into trouble is how to capture the values of the cloned rows. </p>
  
  <p>Im currently using this to capture the value of one of the input elements:</p>
  
  <pre><code>var fineexpense= document.getElementById('fineexpense').value;
  </code></pre>
  
  <p>When I have multiple rows, it only grabs the first value. </p>
  
  <p>What would be the best way to turn all the values with that ID into an array then send it via AJAX? </p>
  
  <p>Im really stumped with how to do this with Javascript. Any help would be great! Thank you.</p>
  
  <p>This is my cloning function : (needs to be edited to change ID)</p>
  
  <pre><code>function add() {
  
    var row = document.getElementById("finerow"); // find row to copy
    var table = document.getElementById("adddate"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
   // clone.id = "newID"; // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
  }
  </code></pre>
  
  <p>This is a sample of my HTML:</p>
  
  <pre><code>&lt;table  class="tablesorter2"&gt; 
      &lt;tbody&gt; 
          &lt;tr id='finerow'&gt; 
              &lt;td&gt;Expense:
              &lt;/td&gt;
  
              &lt;td&gt;
                &lt;select id="fineexpense" name='fineexpense'&gt;
                &lt;option value='Mortage/Rent'&gt;Mortage/Rent
                &lt;/option&gt;
                &lt;option value='Auto'&gt;Auto
                &lt;/option&gt;
  </code></pre>