<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  
<div class="jumbotron text-center">
  <h1>
  Multiple Row Demo
</h1>
</div>

<div class="container">
  
  <form id="multiRowDemo">
    
    <div id="rows" class="form-group">
      
      <div id="rowTemplate" class="input-group">
        <input type="text" name="rows[]" disabled="disabled" class="form-control">
        <div class="input-group-btn">
          <button type="button" data-id="" class="remove-row btn btn-danger">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </div>
      </div>
      
      <div class="input-group">
        <input type="text" name="rows[]" class="form-control">
        <div class="input-group-btn">
          <button type="button" data-id="0" class="remove-row btn btn-danger">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </div>
      </div>
      
    </div>
    
    <div class="form-group">
      <button type="button" class="add-row btn btn-sm btn-block btn-default">Add row</button>
    </div>
    
    <div class="form-group">
      <button type="submit" class="btn btn-lg btn-block btn-primary">Submit</button>
    </div>
    
  </form>
  
  <pre id="saveData" class="well"></pre>
  
</div>

</body>

</html>
$(function() {
  
  $(document).on("click", "button.add-row", addRowHandler);
  $(document).on("click", "button.remove-row", removeRowHandler);
  $(document).on("submit", "#multiRowDemo", saveRowsHandler);
  
  function addRowHandler() {
    var $form  = $("#multiRowDemo"),
        $rows  = $form.find("input[name^='row']"),
        $clone = $('#rowTemplate').clone();

    // remove the id attribute as that hides the template
    // enable the input field, the template is disabled to avoid submitting it
    $clone
      .removeAttr("id")
      .find("input")
        .removeAttr("disabled");

    // hack to get outerHtml() in Jquery
    var template = $('<div>').append($clone).remove().html();

    $("#rows").append(template);
  }

  function removeRowHandler() {
    $(this).closest(".input-group").remove();
  }
  
  function saveRowsHandler(e) {
    e.preventDefault();
    
    var formData = $(this).serialize();
    
    // Here you would probably do a $.post("/yourscript.php", formData)
    $("#saveData").text("Data submitted:\n" + JSON.stringify($(this).serializeArray(), null, 2));
  }

});
#rowTemplate {
  display: none;
}