title: Mobile Tables - Jquery, so close, stuck on the last part
body: <p>I'm trying to make a script to make my applications tables more mobile friendly.</p>
  
  <p>The tables are all very similar, but very in number of row and columns, since they will be dynamically created, I'll have little control over this, so i've come up with the script below, it almost works but one function is not be passed on to each table, it stops after the first.</p>
  
  <p>I suggest looking at the js fiddle: <a href="http://jsfiddle.net/e4vC3/1/" rel="nofollow">http://jsfiddle.net/e4vC3/1/</a></p>
  
  <p>Here is the piece of the script that is not working correctly:</p>
  
  <pre><code>// Create content for new headers in mobile table by copying from original table
  var HeaderArray = [];
  $("table thead tr th").each(function(){
   var innerArray = [];
      $(this).each(function () {
          innerArray.push($(this).text());
      });
       HeaderArray.push(innerArray); // Put content for new headers in array
  });
  
  $("table.mobile_table tbody tr").each(function(index, elem){ // Place content of array where array position and row index are the same
      $(this).find("td").first().text(HeaderArray[index]);
  });
  </code></pre>
  
  <p>Again, if you check the fiddle, you will see that the first arry stops copying objects after the first table, i cant get it to run all the way thought. </p>
  
  <p>If anyone could help me with them, i would really, realy appreciate it..... <a href="http://jsfiddle.net/e4vC3/1/" rel="nofollow">http://jsfiddle.net/e4vC3/1/</a></p>