title: Moving cursor to the next input using down arrow key on dynamically created input
body: <p>I have a table with dynamically created rows and input, what  I would like to do is when the down/up arrow is pressed, the cursor can move to the next or previous text input without using the mouse. I have tried one but seems not to work for me.</p>
  
  <p>Table with dynamically generated rows</p>
  
  <pre><code>&lt;table cellspacing="0" cellpadding="0" border="0" align="center" class="dave-table" id="TabsTabeUniformity"&gt;
              &lt;tbody&gt;&lt;tr&gt;&lt;th id="counter"&gt;No of rows: 3&lt;/th&gt;
              &lt;/tr&gt;&lt;/tbody&gt;&lt;tbody&gt;                
              &lt;tr&gt;
                  &lt;td height="53"&gt;&lt;div align="center"&gt;No.&lt;/div&gt;&lt;/td&gt;
                  &lt;td valign="middle" align="center"&gt;&lt;p align="center"&gt;Tablets (mg)&lt;/p&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button id="addRow"&gt;+ Add Row&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;&lt;div align="center"&gt;1&lt;/div&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;button id="remRow"&gt;-Remove&lt;/button&gt;&lt;/td&gt;
                     &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;div align="center"&gt;2&lt;/div&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;button id="remRow"&gt;-Remove&lt;/button&gt;&lt;/td&gt;
                     &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;div align="center"&gt;3&lt;/div&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"&gt;&lt;/td&gt;
                         &lt;td&gt;&lt;button id="remRow"&gt;-Remove&lt;/button&gt;&lt;/td&gt;
                     &lt;/tr&gt;&lt;tr&gt;
                  &lt;td&gt;&lt;div align="center"&gt;Average&lt;/div&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" readonly="" name="average" id="av1"&gt;&lt;/td&gt;
  
              &lt;/tr&gt;
              &lt;/tbody&gt;
  
              &lt;input type="hidden" id="tabStatus" name="tablet"&gt;          
          &lt;/table&gt;
  </code></pre>
  
  <p>The javascript I am trying to use</p>
  
  <pre><code>$(document).on('keydown','#TabsTabeUniformity &gt; tbody tr.num',function (e) {
      if (e.which === 40) {
  
          $(this).closest('td').nextAll().eq(1).find('.num').focus()
      }
   });
  </code></pre>
  
  <p>Any suggestions is highly appreciated</p>