title: Can't access an input value
body: <p>I have a web page with a table to input data. Adding/deleting a row works, but the added row copies the data of the first line.
  I'm using:</p>
  
  <pre><code>jquery
  bootstrap  
  globalize    
  jquery.dataTables
  query.table.addrow
  </code></pre>
  
  <p>I can't access the numeric values. I want to:</p>
  
  <ol>
  <li>give the numbers a default value of 0 for the inputs.</li>
  <li>get the values and use them to calculate other values in the page.</li>
  </ol>
  
  <p>The html:</p>
  
  <pre><code>          &lt;form class="form-horizontal"&gt;
              &lt;table id="tabc" border="1"  cellpadding="0" cellspacing="0" class="table table-condensed datatable" style="width:auto;margin:30px"&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th title="Masa en gramos" &gt;Masa(g)&lt;/th&gt;
                    &lt;th&gt;Analito&lt;/th&gt;
                    &lt;th title="Concentración del standard"&gt;Std&lt;/th&gt; 
                    &lt;th&gt;Volumen&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input type="number" class="input-mini" name="ryacur" id="ryacur1" &gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input type="text" data-provide="typeahead" data-source='["Ag","Al","As","Au","Ba","Be","Bi","Br","Cr","Pb","Pd"]' autocomplete="off" class="input-mini" name="anacur" id="anacur1" &gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input type="number" class="input-mini" name="stdcur" id="stdcur1" &gt;&lt;/td&gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input type="button" class="AddNew" value="Agrega"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
               &lt;div class="span2 offset3"&gt;&lt;input type="submit" name="enviar" value="Enviar" style="color:darkblue"&gt;&lt;/div&gt;
            &lt;/form&gt;
  </code></pre>
  
  <p>The js:</p>
  
  <pre><code>$('#tabc').dataTable({
      "oLanguage": {
          "sUrl": "/arch/es_CL.js"
      },
          "bPaginate": false,
          "bLengthChange": false,
          "bFilter": false,
          "bSort": false,
          "bInfo": false,
          "bAutoWidth": true
  });
  
  
  $('.AddNew').click(function () {
      var row = $('#tabc tbody tr:last-child'),
          newRow = row.clone(),
          oTable = $('#tabc').dataTable();
      newRow.find("input", newRow).each(function () {
          this.val = '';
          var num = +(this.id.match(/\d+$/) || [0])[0] + 1
          this.id = this.id.replace(/\d+$/, "") + num;
          console.log(this.val); // &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; Doesn't work
          $('input[type="button"]', newRow).removeClass('AddNew').addClass('RemoveRow').val('Borra');
      });
      newRow.insertAfter(row);
  });
  
  $('table').on('click', '.RemoveRow', function () {
      $(this).closest('tr').remove();
  });
  </code></pre>
  
  <p>What am I missing?</p>