title: jQuery loop through table to display values
body: <p>I'm at a loss here. 
  I created a quick script that will add a new row to a table and also has the capability to delete a row. </p>
  
  <p>jsFiddle --><a href="http://jsfiddle.net/wLpJr/10/" rel="nofollow noreferrer">http://jsfiddle.net/wLpJr/10/</a></p>
  
  <p>What I want to achieve is this:
  Display each value of each row (in the div with id='thedata')</p>
  
  <p>I originally started off with adding a number at the end of each id, starting at '1', and incrementing each time the user adds a row.</p>
  
  <pre><code> //This is random code
   var rowcount = parseInt($('#rowcount').val());
   var newcount = rowcount + (1*1);
   var x = $('#radioinput' + newcount).val('a value');
   $('#rowcount').val(newcount);
  </code></pre>
  
  <p>The problem is that lets say you add 5 rows. Now delete row 3. When you loop through the table of data you will get an error because row "3" does not exist. You have rows 1, 2, 4, 5, 6. Specifically - the input with id = 'radioinput3' will not be present.</p>
  
  <p>I then decided to do this:</p>
  
  <pre><code> $('#maintable &gt; tbody &gt; tr').each(function() {
          radiovalue[i] = $("input[type='hidden']", this).map(function() {
              var vid = 'radio' + i;
              var myval = this.value;
              var radioinput = document.createElement("input");
                  radioinput.type = "hidden";
                  radioinput.value = myval; // set the CSS class
                  radioinput.id = vid;
                  $('#maintable').append(radioinput);
          }).get()
          text1value[i] = $('td &gt; input', this).map(function() {
              var vid = 'text1pos' + i;
              var myval = this.value;
              var text1input = document.createElement('input');
              text1input.type='hidden';
              text1input.value = myval;
              text1input.id = vid;
              $('#maintable').append(text1input);
          }).get()
          text2value[i] = $('td &gt; input', this).map(function() {
              var vid = 'text2pos' + i;
              var myval = this.value;
              var text2input = document.createElement('input');
              text2input.type='hidden';
              text2input.value = myval;
              text2input.id = vid;
              $('#maintable').append(text2input);
          }).get();
      });
  </code></pre>
  
  <p>The problem here is that I'm getting 'undefined' values.</p>