Add/Remove Input Fields Dynamically with jQuery Try: http://jsfiddle.net/aaki/hMJEy/1/

dynamic_fields.js

$(function() {
  $('.multi-field-wrapper').each(function () {
      
      // Save context
      var $wrapper = $('.multi-fields', this);
      
      // Handle add button
      $(".add-field", $(this)).click(function (e) {
          $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
      });
      
      // Handle remove button
      $('.multi-field .remove-field', $wrapper).click(function () {
          if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove();
      });
  });
});

form.html

<form role="form" action="/wohoo" method="POST">
    <label>Stuff</label>
    <div class="multi-field-wrapper">
        <div class="multi-fields">
            <div class="multi-field">
                <input type="text" name="stuff[]">
                <button type="button" class="remove-field">Remove</button>
            </div>
        </div>
        <button type="button" class="add-field">Add field</button>
    </div>
</form>