dynamically creating form rows

by snowMonkey

HTML

<form>
  <fieldset style=" margin: 0 0 5px 0;">
    <div>enter amount of text + number boxes:
      <input id="amount" step="1" style=" width: 45px;" type="number" value="1">
    </div>
    <div class="container">

    </div>
    <button class="add-row-btn">
      Add row
    </button>
    <input class="button" id="submitBtn" style="margin-left: 85%;" type="button" value="Submit">
  </fieldset>
</form>

CSS

.line-title {
  width: 259px;
  margin: 0px;
  height: 15px;
  clear: left;
}

.line-number {
  width: 45px;
}

.container {
  margin: 10px;
}

JavaScript

$(function() {
  $("#submitBtn").on("click", submitted);
  // Created an 'add new row' button, which non-destructively adds a row to the container.
  $(".add-row-btn").on("click", function(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      $(".container").append(createNewRow());
    })
    // When the user chooses a different number, completely reset all the rows?
  $('#amount').on('change', function() {
    // Save a reference to the row container.
    var containerEl = $(".container");
    // wipe out completely the contents of the container.
    containerEl.empty();
    // get the number of rows to be created.
    var startingNumberOfLines = parseInt($("#amount").val());
    // loop the number of times requested, and append a new row each time.
    //   createNewRow() is defined below.
    for (var i = 0; i < startingNumberOfLines; i++) {
      $(".container").append(createNewRow());
    }
  });
  // Start with an initial value.
  $("#amount").trigger("change");
})


/*****
 * createNewRow() -- function to create a new row, composed of a text input,
 *    and two labels containing number inputs.
 *****/
var createNewRow = function() {
  /****
   * first, we'll define all the elements that will be placed
   *  in this row -- the text input, the labels and the inputs.
   ****/
  var lineTitleEl = $("<input>").attr("placeholder", "enter text here")
    .addClass("line-title");
  var labelEl = $("<label>");
  var inputEl = $("<input>").attr("step", "0.05").attr("type", "number")
    .addClass("line-number");

  // The firstNumberEl is a label containing an input. I can simply
  //   clone my label el, and input el, and use them. Don't need to,
  //   but i CAN.
  var firstNumberEl = labelEl.clone();
  firstNumberEl.text("number1: ").attr("class", "first-number-el").append(inputEl.clone());

  var secondNumberEl = labelEl.clone();
  secondNumberEl.text("number2: ").attr("class", "second-number-el").append(inputEl.clone());

  // Now create the...