title: How to add Total amount of order form to Shopping cart?
body: <p>I have prepared online order form for a printing house. In the form everything works smoothly. But I need to put total amount of each order into shopping cart, because someone may want to order several print jobs. I am new in javascript, I tried to do it by the loop, but it adds only once. Any help will be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//calculation script omitted
  var addToCartButton = document.getElementsByClassName('addToCart')
  for (var i = 0; i &lt; addToCartButton.length; i++) {
    var button = addToCartButton[i]
    button.addEventListener('click', function() {
      var grandTotal = new Array;
      grandTotal.push(allTotal)
      var cartRowContents = '&lt;table&gt;&lt;tr&gt;&lt;th&gt;Xidmet adi&lt;/th&gt;&lt;th&gt;Cemi&lt;/th&gt;&lt;/tr&gt;'
      var buttonClicked = document.getElementById('cartTotal')
      var serviceName = document.getElementById('service')
      for (k = 0; k &lt; grandTotal.length; k++) {
        cartRowContents += '&lt;tr&gt;&lt;td&gt;' + serviceName.value + '&lt;/td&gt;&lt;td&gt;' + grandTotal[k] + '&lt;/td&gt;&lt;/tr&gt;'
      }
      buttonClicked.innerHTML = cartRowContents;
      cartRowContents += '&lt;/table&gt;'
    })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal-header"&gt;
    &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
    &lt;h4 class="modal-title"&gt;Onlayn ödəmə&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;form class="form-payment" action="&lt;?php echo htmlspecialchars($_SERVER['PHP_SELF'])?&gt;" method="post" id="payment"&gt;
      &lt;fieldset&gt;
        &lt;p class="warning" id="warning"&gt;Hörmətli müştəri, istəyinizə uyğun sifarişinizi qeyd edin və yekun məbləğin doğruluğundan əmin olduqdan sonra "Təsdiq et" düyməsini sıxın&lt;/p&gt;
        &lt;input type="hidden" name="id" /&gt;
        &lt;label for="service"&gt;Xidmət növü:&lt;/label&gt;
        &lt;select class="form-select" id="service" name="service" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Xidmət növünü seçin&lt;/option&gt;
          &lt;option value='Çap'&gt;Çap&lt;/option&gt;
          &lt;option value='Kserokopiya'&gt;Kserokopiya&lt;/option&gt;
          &lt;option value='Kitab çapı'&gt;Kitab çapı&lt;/option&gt;
          &lt;option value='Diplom və sertifikat çapı'&gt;Diplom və sertifikat çapı&lt;/option&gt;
          &lt;option value='Poster çapı'&gt;Poster çapı&lt;/option&gt;
          &lt;option value='Skan'&gt;Skan &lt;/option&gt;
          &lt;option value='Laminasiya'&gt;Laminasiya&lt;/option&gt;
          &lt;option value='Cildləmə'&gt;Cildləmə&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="papertypeL" for="papertype"&gt;Kağız növü:&lt;/label&gt;
        &lt;select class="form-select" id="papertype" name="papertype" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Kağız növünü seçin&lt;/option&gt;
          &lt;option value='Standart kağız (A4-parlaq)-0.50 AZN'&gt;Standart kağız(A4-parlaq)-0.50 AZN&lt;/option&gt;
          &lt;option value='Premium kağız (A4-parlaq)-1 AZN'&gt;Premium kağız (A4-parlaq)-1 AZN&lt;/option&gt;
          &lt;option value='VİP kağız (A4-Mat)-1.50 AZN'&gt;VİP kağız (A4-Mat)-1.50 AZN&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="scansizeL" for="scansize"&gt;Kağız ölçüsü:&lt;/label&gt;
        &lt;select class="form-select" id="scansize" name="scansize" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Ölçünü seçin&lt;/option&gt;
          &lt;option value='A4'&gt;A4&lt;/option&gt;
          &lt;option value='A3'&gt;A3&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="bookprintL" for="bookprint"&gt;Kağız ölçüsü:&lt;/label&gt;
        &lt;select class="form-select" id="bookprint" name="bookprint" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Ölçünü seçin&lt;/option&gt;
          &lt;option value='A4'&gt;A4&lt;/option&gt;
          &lt;option value='A5'&gt;A5&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="postersizeL" for="postersize"&gt;Poster ölçüsü:&lt;/label&gt;
        &lt;select class="form-select" id="postersize" name="postersize" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Ölçünü seçin&lt;/option&gt;
          &lt;option value='A3'&gt;A3&lt;/option&gt;
          &lt;option value='A3+'&gt;A3+&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="posterpaperL" for="posterpaper"&gt;Kağız növü:&lt;/label&gt;
        &lt;select class="form-select" id="posterpaper" name="posterpaper" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Kağız növünü seçin&lt;/option&gt;
          &lt;option value='Standart kağız'&gt;Standart kağız&lt;/option&gt;
          &lt;option value='Premium kağız'&gt;Premium kağız&lt;/option&gt;
          &lt;option value='VİP kağız'&gt;VİP kağız&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="printL" for='print'&gt;Çap növü:&lt;/label&gt;
        &lt;label id="radio" class="container-radio"&gt;Ağ-qara
        &lt;input type="radio" checked="checked" name="capnovu" value="Ağ-qara" onclick="calculateTotal()"&gt;
        &lt;span class="checkmark"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="radio" class="container-radio"&gt;Rəngli
        &lt;input type="radio" name="capnovu" value="Rəngli" onclick="calculateTotal()"&gt;
        &lt;span class="checkmark"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="sideL" for='side'&gt;Üz sayı:&lt;/label&gt;
        &lt;label id="side" class="container-radio"&gt;Təküzlü
        &lt;input type="radio" checked="checked" name="uzsayi" value="Təküzlü" onclick="calculateTotal()"&gt;
        &lt;span class="checkmark"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="side" class="container-radio"&gt;İkiüzlü
        &lt;input type="radio"  name="uzsayi" value="İkiüzlü" onclick="calculateTotal()"&gt;
        &lt;span class="checkmark"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="kitab-cildL" class="container-radio" for="kitab-cild"&gt;Cildləmə&lt;input id="kitab-cild" type="checkbox" onclick="calculateTotal()" /&gt;&lt;span class="checkmark-box"&gt;&lt;/span&gt;&lt;/label&gt;
        &lt;label id="cildL" for="cild"&gt;Cildləmə növü:&lt;/label&gt;
        &lt;select class="form-select" id="cild" name="cild" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Cildləmə növünü seçin&lt;/option&gt;
          &lt;option value='Plasmas spiral cildləmə'&gt;Plasmas spiral cildləmə&lt;/option&gt;
          &lt;option value='Dəmir spiral cildləmə'&gt;Dəmir spiral cildləmə&lt;/option&gt;
          &lt;option value='Kleylə cildləmə'&gt;Kleylə cildləmə&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="cildA4L" for="cildA4"&gt;Cildləmə növü:&lt;/label&gt;
        &lt;select class="form-select" id="cildA4" name="cildA4" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Cildləmə növünü seçin&lt;/option&gt;
          &lt;option value='Dəmir spiral cildləmə'&gt;Dəmir spiral cildləmə&lt;/option&gt;
          &lt;option value='Plasmas spiral cildləmə'&gt;Plasmas spiral cildləmə&lt;/option&gt;
          &lt;option value='Kleylə cildləmə'&gt;Kleylə cildləmə&lt;/option&gt;
          &lt;option value='Kitab bərpa'&gt;Kitab bərpa&lt;/option&gt;
          &lt;option value='Çubuqla cildləmə'&gt;Çubuqla cildləmə&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="cildA3L" for="cildA3"&gt;Cildləmə növü:&lt;/label&gt;
        &lt;select class="form-select" id="cildA3" name="cildA3" onchange="calculateTotal()"&gt;
          &lt;option value="none" selected disabled&gt;Cildləmə növünü seçin&lt;/option&gt;
          &lt;option value='Dəmir spiral cildləmə'&gt;Dəmir spiral cildləmə&lt;/option&gt;
          &lt;option value='Plasmas spiral cildləmə'&gt;Plasmas spiral cildləmə&lt;/option&gt;
          &lt;option value='Çubuqla cildləmə'&gt;Çubuqla cildləmə&lt;/option&gt;
        &lt;/select&gt;
        &lt;label id="sayL" for="say"&gt;Səhifə Sayı:&lt;/label&gt;&lt;input id="say" name="say" class="form-input" type="text" value="" onclick="calculateTotal()" /&gt;
        &lt;label id="nusxeSayL" for="nusxeSay"&gt;Nüsxə Sayı:&lt;/label&gt;&lt;input id="nusxeSay" name="nusxeSay" class="form-input" type="text" value="" onclick="calculateTotal()" /&gt;
        &lt;label id="laminasiyaL" class="container-radio"&gt;Laminasiya olacaq?
        &lt;input type="checkbox" id="laminasiya"  name="checkbox"  onclick="calculateTotal()"&gt;
        &lt;span class="checkmark-box"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="deliveryL" class="container-radio"&gt;Çatdırılma olacaq?
        &lt;input type="checkbox" id="delivery"  name="checkbox"  onclick="calculateTotal()"&gt;
        &lt;span class="checkmark-box"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="deliveryRadio" class="container-radio"&gt;Bakıdaxili kuryer ilə (3 AZN)
        &lt;input type="radio" checked="checked" name="radio" value="kuryer" id="kuryer" onclick="calculateTotal()"&gt;
        &lt;span class="checkmark"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="deliveryRadio" class="container-radio"&gt;Bakıdaxili taksi ilə (5 AZN)
        &lt;input type="radio"  name="radio" value="taksi" id="taksi" onclick="calculateTotal()"&gt;
        &lt;span class="checkmark"&gt;&lt;/span&gt;
      &lt;/label&gt;
        &lt;label id="deliveryRadio" class="container-radio"&gt;Bölgələrə poçtla (3 AZN)
        &lt;input type="radio"  name="radio" value="poct" id="poct" onclick="calculateTotal()"&gt;
        &lt;span class="checkmark"&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/fieldset&gt;
  &lt;/div&gt;
  
  &lt;div id="totalPrice" style="padding:10px;
          font-weight:bold;
          background-color:#ff0;
          "&gt;
  &lt;/div&gt;
  &lt;div id="cartTotal"&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button type="submit" name="submit" data-dismiss="modal" class="btn btn-default"&gt;Təsdiq et&lt;/button&gt;
    &lt;button class="btn btn-default addToCart" id="addToCart" type="submit"&gt;Add to Cart&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to add variable allTotal  into a grandTotal array when addToCart button clicked and then reset the form. It adds the datas but instead of adding new row it replaces the old data.</p>