<div class="second-booking-container">
                     <div>
              <div class="second-booking-container-image"><img
                  src="./img/shirt.png" /></div>
              <p class="second-booking-container-icon" name="product"
                value="100" id="qnty_1">
                  Shirt(s)</p>
                  <p>
                        <button type="button" class="sub" data-
                   target="shirt">-</button>
                        <input type="text" value="0" class="field_shirt"
                        />
                        <button type="button" class="add" data-
            target="shirt">+</button>
                        <p class="display_shirt" name="price" max="3"
                       min="1">&#8358; 100</p>
                  </p>
          </div>

          <div>
              <div class="second-booking-container-image"><img
                         src="./img/trouser.png" /></div>
                    <p class="second-booking-container-icon"
                        name="product" value="100" id="qnty_2">
                        Trouser(s)</p>
                        <div>
                            <p>
                               <button type="button" class="sub" data-
                  target="trousers">−</button>
                     <input type="text" value="0"
                           class="field_trousers" />
                               <button type="button" class="add" data-
                   target="trousers">+</button>
                               <p class="display_trousers" name="price"
                      max="3" min="1">&#8358; 0</p>
                            </p>
                        </div>
            </div>
            <div>
              <div class="second-booking-container-image"><img
                                   src="./img/skirt.png" /></div>
              <p class="second-booking-container-icon" name="product"
              value="100" id="qnty_3">
                  Skirt(s)</p>
                  <div>
                      <p>
                        <button type="button" class="sub" data-
            target="skirts">−</button>
                        <input type="text" value="0"
               class="field_skirts"
                  />
                        <button type="button" class="add" data-
             target="skirts">+</button>
                        <p class="display_skirts" name="price" max="3"
          min="1">&#8358; 0</p>
                    </p>
                </div>
          </div>

          Here is the Javascript code
       var subElm = document.querySelectorAll('.sub');
        var addElm = document.querySelectorAll('.add');
         var totalValueElm = document.getElementById('totalValue');

        for (var i = 0; i < subElm.length; i++) {
             subElm[i].addEventListener('click', function () {
        var targetItem = this.getAttribute('data-target');
         var inputElm = document.querySelector('.field_' + targetItem);
       var displayElm = document.querySelector('.display_' +
              targetItem);
       var currentValue = +inputElm.getAttribute('value');

       if (currentValue !== 0) {
         var incValue = currentValue - 1;
        var strValue = ' ' + incValue;
        inputElm.setAttribute('value', incValue);
        displayElm.innerHTML = "&#8358;" + strValue;
        totalValueElm.innerText = Number(totalValueElm.innerText) - 100;
                   }
          });

           addElm[i].addEventListener('click', function () {
             var targetItem = this.getAttribute('data-target');
            var inputElm = document.querySelector('.field_' +
                 targetItem);
             var displayElm = document.querySelector('.display_' +
           targetItem);
             var currentValue = +inputElm.getAttribute('value');
            var incValue = currentValue + 1;
                var strValue = ' ' + incValue;
            inputElm.setAttribute('value', incValue);
               displayElm.innerHTML = "&#8358;" + strValue;
          totalValueElm.innerText = Number(totalValueElm.innerText) +
                100;
               });
             }
             Here is the second html page which is the summary page that
            should show the result from the calculated total from the
             previous page and also the number of clothes each
               individual
             wishes to wash
       <div class="summaryContainer">
        <div class="summaryNavBar"><p
          className="summaryTitle">Summary</p>
             </div>
        <div class="summaryContent">
        <p class="total" id="total">Total:</p>
       <p class="sum">&#8358;0.00</p>
        </div>

         <div class="summaryCard">
         <div class="summary-card-title">
             <div>Item</div>
          <div>Quantity</div>
         </div>
         <div class="summary-card-content">
           <div >Shirt(s)</div><div  id="
         first" class="summary-quantity"><button type="button" id="sub"
         class="sub">−</button>
        <input type="text" id="1" value="0" class="field" />
          <button type="button" id="add" class="add">+</button>   </div>
           </div>
       <div class="summary-card-content">

       <div>Trouser(s)</div>
        <div class="summary-quantity" id="second">
         <button type="button" id="sub" class="sub">−</button>
              <input type="text" id="1" value="0" class="field" />
          <button type="button" id="add" class="add">+</button>
         </div>
       </div>
       <div class="summary-card-content" id="third">
       <div>Suit(s)</div><div class="summary-quantity"><button
           type="button" id="sub" class="sub">−</button>
          <input type="text" id="1" value="0" class="field" />
          <button type="button" id="add" class="add">+</button>   </div>
          </div>

         <p class=" more">..more</p>
         </div>
         <div class="summaryButton">
         <button class="button-left"><span><FontAwesomeIcon
           class="buttonLeft" icon="angle-left"/></span>Back</button>
           <button class="button-right">Proceed to
           payment<FontAwesomeIcon
          class="buttonRight" icon="angle-right"/></button>