dynamic form

by redfood

HTML

<div id="wrapper">
    <form>
        <div class="field-section">
            <table>
                <tr>
                    <th>Field name</th>
                    <th>Field type</th>
                    <th>Required</th>
                </tr>
                <tr id="first">
                    <td>
                        <input type="text" />
                    </td>
                    <td>
                        <select>
                            <option>Text</option>
                            <option>Email</option>
                        </select>
                    </td>
                    <td>
                        <input type="checkbox">
                    </td>
                </tr>
            </table>
            <button type="button">+</button>
        </div>
        <input type="submit" value="create">
    </form>
</div>

CSS

td {
     padding: 10px;
     margin-left:auto;
     margin-right:auto;
 }

JavaScript

$(document).ready(function () {
      $("button").click(function () {
          $("#first").clone(false).removeAttr("id").appendTo($("table"));
      });
  });