title: How do I create a new input on tab with jQuery (or vanilla JS)
body: <p>Like many things, my question is best explained with a picture:
  <a href="http://gyazo.com/f7df971c91a5ab4a4969d12f4c5f32b6.png?1329575807" rel="nofollow">http://gyazo.com/f7df971c91a5ab4a4969d12f4c5f32b6.png?1329575807</a></p>
  
  <p>When the user is on the last field in each column, I want a new input to pop up underneath the current input when they press tab (similar to what Quizlet does).</p>
  
  <p>I don't have that much experience with jQuery, could someone help me out, or point me in the right direction?</p>
  
  <p>EDIT:
  So here's what I have currently:</p>
  
  <pre><code>$(document).ready(function(){
  $('section#attendance input:last').keydown(function(e) {
      if (e.which == 9)
      {
          var $this = $(this);
          var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
          $this.parent().append('&lt;input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" /&gt;');
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>For some reason, after it creates the first new input, it doesn't use that new input for the tab trigger, but rather the input it used before. Any idea why?</p>