add and update the value of the total number dynamically after inserting new rows

As long as the total quantity is fixed at the beginning of the script-execution, this works. Otherwise, it would be best to save the actual allowed total quantity as an attribute, and observe it using a MutationObserver. That way you can update your max. value in your code dynamically, when the total quantity-attribute changes. You can define custom attributes by naming them “data-*” where “*” is a custom name.

Solution for your problem
You are using the same ID on multiple elements. What you meant were classes, so change id="increment" to class="increment", and the same for decrement.

Since we don’t want to input something with the buttons, but add listener to them, I’d say it is better to actually use <button>. In forms, buttons act as type="submit", which we don’t want, so we need to change it to type="button".

Since the rows and the total quantity actually belong together, it is wiser to place them together into one <form>-element. However, you can still group the buttons and inputs as a row together using <div>.

Now regarding the in-/decrementing of the row’s values and the total quantity:

  1. Save the allowed total quantity in a variable
  2. Add event-listener to the corresponding buttons
  3. If action is valid, change row’s value
  4. Update total quantity number to totalQuantity - getSumOfRows()

To add new rows dynamically, we create and setup such an element, and append it to the form. See the appendNewRow()-function below.

I have added the readonly attribute to the input-fields so that you cannot enter numbers via keyboard.

window.addEventListener("load", () => {
  let elTotalQuantity = document.querySelector("#totalqty");
  let totalQuantity = parseInt(elTotalQuantity.innerHTML);
  function getSumOfRows() {
    let sum = 0;
    for (let input of document.querySelectorAll("form .row > input.quantity"))
      sum += parseInt(input.value);
    return sum;
  function updateTotalQuantity() {
      elTotalQuantity.innerHTML = totalQuantity - getSumOfRows();
  function appendNewRow() {
    let row = document.createElement("div");
    let child;
    // input.quantity
    let input = document.createElement("input");
    input.value = "0";
    input.setAttribute("readonly", "");
    input.setAttribute("type", "text");
    // button.increment
    child = document.createElement("button");
    child.innerHTML = "+";
    child.setAttribute("type", "button");
    child.addEventListener("click", () => {
      if (getSumOfRows() >= totalQuantity) return;
    // button.increment
    child = document.createElement("button");
    child.innerHTML = "-";
    child.setAttribute("type", "button");
    child.addEventListener("click", () => {
      if (input.value <= 0) return;
    // button.remove-row
    child = document.createElement("button");
    child.innerHTML = "Remove";
    child.setAttribute("type", "button");
    child.addEventListener("click", () => {
    document.querySelector("form .rows").append(row);
  document.querySelector("form .add-row").addEventListener("click", () => appendNewRow());
  <label>Total Quantity: <span id="totalqty">10</span></label>
  <div class="rows">
  <button type="button" class="add-row">Add new row</button>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top