js jQuery Bootstrap dynamic form

by alfannas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <div id="header1">
    Form 1
  </div>
  <table>
    <tbody>
      <tr>
        <td>email</td>
        <td>
          <input class="form-control" type="text" name="email1[]" />
        </td>
      </tr>
    </tbody>
  </table>
  <p>
    <button class="btn btn-success add" onClick="addMore()"><span class="glyphicon glyphicon-plus-sign"></span> Add More</button>
    <button class="btn btn-danger del" onClick="delMore()"><span class="glyphicon glyphicon-minus-sign"></span> Delete</button>
  </p>
</div>
<div>
  <div>
    Form 2
  </div>
  <table>
    <tbody>
      <tr>
        <td>email</td>
        <td>
          <input class="form-control" type="text" name="email2[]" />
        </td>
      </tr>
    </tbody>
  </table>
  <p>
    <button class="btn btn-success add" onClick="addMore()"><span class="glyphicon glyphicon-plus-sign"></span> Add More</button>
    <button class="btn btn-danger del" onClick="delMore()"><span class="glyphicon glyphicon-minus-sign"></span> Delete</button>
  </p>
</div>

CSS

table,
tr,
td {
  padding: 10px;
}

.del {
  display: none;
}

JavaScript

$("button.add").click(function() {
  $(this).siblings("button").show("fast");
  var x = $(this).parent().prev("table").find("tr").last().clone();
  $(this).parent().prev("table").find("tbody").append(x);
  $(this).parent().prev("table").find("tr").last().find("input[type='text']").val("");
});

$("button.del").click(function() {
  var table = $(this).parent().prev("table");
  var rowCount = table.find("tr").length;
  table.find("tr:last").remove();
  if (rowCount <= 2) {
    $(this).hide("fast");
  }

});