generate new form fields with incrementing ids

by Mark Hendricks

HTML

<div id="container">
      <div id="transaction0" class="row">
        <input type="number" id="quantity0" class="standard"><input type="number" id="price0" class="standard"><input type="number" id="average0" class="standard" readonly>
      </div>
    </div>
    <button onclick="addFields();">+</button>
    <div id="message"></div>

CSS

html {
          position: relative;
          min-height: 100%;
      }
      body {
          font-family: 'Open Sans', sans-serif;
          margin: 30px 30px 30px 30px;
      }
      container {
        display: block;
      }

      /* Chrome, Safari, Edge, Opera */
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      /* Firefox */
      input[type=number] {
        -moz-appearance: textfield;
      }

      .button {
        line-height: 1;
      }
      input.standard {
        width: 120px;
        padding: 5px, 0px;
        margin: 2px;
        text-align: right;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
      }

JavaScript

function addFields() {
      var container = document.getElementById("container");
      var message = document.getElementById("message");
      var lastdivid = container.lastElementChild.id;
      var i = lastdivid.replace(/\D/g, '') * 1 + 1;

      var div = document.createElement("div");
      var divid = "transaction" + i;
      div.id = divid;
      div.setAttribute("class", "row");
      container.appendChild(div);

      var input1 = document.createElement("input");
      input1.type = "number";
      input1.id = "quantity" + i;
      input1.setAttribute("class", "standard");
      div.appendChild(input1);

      var input2 = document.createElement("input");
      input2.type = "number";
      input2.id = "price" + i;
      input2.setAttribute("class", "standard");
      div.appendChild(input2);

      var input3 = document.createElement("input");
      input3.type = "number";
      input3.id = "average" + i;
      input3.setAttribute("class", "standard");
      input3.setAttribute("readonly", "true");
      div.appendChild(input3);

      var removebtn = document.createElement("button");
      removebtn.id = "remove" + i;
      removebtn.innerHTML = "-";
      //removebtn.setAttribute("style", "line-height:1;");
      removebtn.className = "button";
      removebtn.onclick = function() {
        document.getElementById(divid).remove(divid)
      };
      div.appendChild(removebtn);
    }