title: Adding rows dynamically with jQuery
body: <p>I'm building a form where I need multiple optional inputs, what I have is basically this:</p>
  <p><a href="https://i.stack.imgur.com/lWvUW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lWvUW.png" alt="form example" /></a></p>
  
  <p>Every time a user presses the plus button a new row of form inputs should be added to the form, how can I do this in jQuery? <strong>Also, is it possible to automatically add a new row when all rows</strong> (or just the last row, if it's easier / faster) <strong>are filled?</strong> That way the user wouldn't need to press the plus button.</p>
  <p>I'm sorry for asking maybe such a basic question but I'm still very green with jQuery, I could do this with PHP but I'm sure Javascript / jQuery plays a more appropriate role here.</p>
  <p>Thanks in advance!</p>
  <hr />
  <h2>@alex:</h2>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  $form = $('#personas');
  $rows = $form.find('.person');
  
  $('a#add').click(function() {
      $rows.find(':first').clone().insertAfter($rows.find(':last'));
      $justInserted = $rows.find(':last');
      $justInserted.hide();
      $justInserted.find('input').val(''); // it may copy values from first one
      $justInserted.slideDown(500);
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form id=&quot;personas&quot; name=&quot;personas&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
    &lt;table width=&quot;300&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;2&quot;&gt;
      &lt;tr&gt;
        &lt;td&gt;Name&lt;/td&gt;
        &lt;td&gt;More?&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;person&quot;&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;name[]&quot; id=&quot;name[]&quot; /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href=&quot;#&quot; id=&quot;add&quot;&gt;+&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>