Add/delete html element

Hello. I have problem with this code. On this imgur link is what i get with current code. What I want is to create this subtotal element (element with big button submit, price and some text) only on last element. Not on every movie that I add to shooping card.

The link:
js - Album on Imgur](js - Album on Imgur

Js. code:

      const singleItem = `
      <div class="single-item">
         <span class="material-symbols-outlined deleteItem"> close </span>
           <img src=${imgSrc} alt="aaa" class="smallPic" />
               <div class="opis">
                   <h2>${imeFilma}</h2>
                </div>
               <div class="kolicina">
                  <button class="plus">+</button>
                 <input type="text" value="1" max="3" min="1" class="input"/>
                 <button class="minus">-</button>
               </div>
           <div class="single-total" data-value="${cijena}">${cijena} KN</div>
        </div>
      `;

      shoopingCart.innerHTML += singleItem;

      const basketTotal = `
      <div class="totalKosara vidljivo">
    <div class="potvrdi">
      <p class="sub">Subtotal</p>
      <p class="price">675 KN</p>
    </div>
    <div class="text">
      <p>Shipping, taxes and discounts calculated at checkout.</p>
    </div>
    <div class="blue"><button>Checkout</button></div>
  </div>
      `;

      //shoopingCart.innerHTML += basketTotal;

      const removeElement = function () {
        const nodes = document.querySelectorAll(`.single-item`);
        let lastNode = nodes[nodes.length - 1];
        if (lastNode) {
          lastNode.insertAdjacentHTML(`afterend`, basketTotal);
        }
      };

      removeElement();

      //OBRISI ITEM
      const deleteItem = document.querySelectorAll(`.deleteItem`);
      deleteItem.forEach((btn) => {
        btn.addEventListener(`click`, function (e) {
          const mainEl = e.target.closest(`.single-item`);
          mainEl.parentNode.removeChild(mainEl);
          button.disabled = false;
        });
      });

      //add more movies btn
      const plusBtn = document.querySelectorAll(`.plus`);
      const minusBtn = document.querySelectorAll(`.minus`);

      plusBtn.forEach((btn) => {
        btn.addEventListener(`click`, function (e) {
          let plus = e.target;
          let parent = plus.closest(`.kolicina`);
          let input = parent.querySelector(`.input`);
          let singleEl = parent.closest(`.single-item`);
          let singleTotal = singleEl.querySelector(`.single-total`);

          input.value++;
          if (input.value > 3) input.value = 3;
          singleTotal.innerText = `${
            singleTotal.dataset.value * input.value
          } KN`;
        });
      });

      minusBtn.forEach((btn) => {
        btn.addEventListener(`click`, function (e) {
          let plus = e.target;
          let parent = plus.closest(`.kolicina`);
          let input = parent.querySelector(`.input`);
          let singleEl = parent.closest(`.single-item`);
          let singleTotal = singleEl.querySelector(`.single-total`);

          input.value--;
          console.log(input.innerText);
          if (input.value < 1) input.value = 1;
          singleTotal.innerText = `${
            singleTotal.dataset.value * input.value
          } KN`;
        });
      });
    });
  });
});

})
.catch((err) => console.error(err));

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.