JS - Attach the same function to many html forms

Question

I am trying to make an e-commerce-like webpage (for practice) wherein a click on any of the buttons would update the cart value by the number (quantity) specified on the input element. So far, I was only able to update the cart from the first form because when I try to assign the function on every form using a loop, the cart updates for a millisecond then returns to zero. I assume its because of the scope. I know there's an easier way to do this without manually assigning the function for every document.forms[n]

JS

 window.onload = function() 
 {
    var getForm = document.forms[0];
    var numItems = 0;
    getForm.onsubmit = function(event) 
    {
      event.preventDefault();
      var getInput = getForm.elements["num-item"].value;
      if(parseInt(getInput)) 
      {
        numItems = numItems + parseInt(getInput);
        var getCart = document.getElementById("item-count");
        getCart.innerHTML = numItems;
        getForm.reset();            
      }
      else 
      {
        alert("Please enter a valid number");
      }
  }

HTML Cart:

<div class="basket">
    <p><i class="fa fa-shopping-basket"></i></p>
    <p id="item-count">0</p>
</div>

HTML Form: For brevity, I'm only posting 1 form example, but in reality, I have 6 other forms that are exactly the same.

<div class="buy-config">
    <form class="buy-form" name="buy-form">
        <label>Quantity:</label>
            <input type="text" class="num-item" />
            <button class="buy-btn">Add to Cart</button>
    </form>
</div>

Answer 1

Loop through all of the forms by querying the selector (using whatever method you prefer, depending on performance requirements and markup flexibility -- I've used getElementsByClassName) and executing a for loop.

Inside the loop, bind a function to the "submit" event using addEventListener. You can define the function in-line (as I've done), or define the function elsewhere, assign it to a variable, and reference the variable when binding to the event.

Within the event listener function, you will refer to the form that was submitted as this.

On top of the changes described above, I've made some minor changes to your code:

1. Your previous version was overwriting the contents of the cart each time. This may have been on purpose, depending on whether you have one "basket" for each item or one overall (this wasn't clear in the question). So, rather than initialize numItems to zero, I've initialized it to the current number of items in the cart.
2. Consider using input type="number" HTML form elements. They're supported by nearly every browser and only accept digits -- they also have up/down arrows and can be set with the scroll wheel. On browsers that don't support them, they fall back to a basic text input.

var forms = document.getElementsByClassName("buy-form");
for (var i = 0; i < forms.length; i++) {
  forms[i].addEventListener("submit", function(event) {
    event.preventDefault();
    var numItems = parseInt(document.getElementById("item-count").innerHTML);
    var getInput = this.getElementsByClassName("num-item")[0].value;
    if (parseInt(getInput)) {
      numItems = numItems + parseInt(getInput);
      var getCart = document.getElementById("item-count");
      getCart.innerHTML = numItems;
      this.reset();
    } else {
      alert("Please enter a valid number");
    }
  });
}

<div class="basket">
  <p><i class="fa fa-shopping-basket"></i></p>
  <p id="item-count">0</p>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>

Answer 2

You can use the jQuery selector.

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function() {
      $('.buy-btn').click(function(){
          $(this).parent('form').submit();
      });
    });
</script>

<form class="buy-form">
   <label>Quantity:</label>
   <input type="text" class="num-item" />
   <button class="buy-btn">Add to Cart</button>
</form>

The code above will setup a function for each HTML elements that has the css class buy-btn. You can select anything using parent, children, prev, next or find function from jQuery.

Of course this is just a basic exemple I'm showing here, and again some simple example could be :

$('.buy-btn').click(function(){
   $(this).parent('form').submit();
   //var itemCount = $('#item-count').html();
   //itemCount++;
   //$('#item-count').html(itemCount);
   var numItem = $(this).prev('.num-item').val();
   $('#item-count').html(numItem);
});