JSFiddle - React, Tailwind, and code Playground

HTML

<div id="basket" data-image-add-request-count="0"></div>

<template id="image-template">
  <img src="https://via.placeholder.com/512/999999/333333/?text=Ringo" style="width: 40px; height: 40px;">
</template>

<button id="button1">
  - 1 -
</button>

<button id="button5">
  - 5 -
</button>

<script>
const basket = document.querySelector("#basket");
const imageTemplate = document.querySelector("#image-template");
const button1 = document.querySelector("#button1");
const button5 = document.querySelector("#button5");

const maxImageAddRequestCount = 2;

basket.addEventListener("App.ImageAddRequest", (event) => {
  const imageAddRequestCount = Number.parseInt(basket.dataset.imageAddRequestCount);
  
  if (imageAddRequestCount >= maxImageAddRequestCount) {
    return;
  }
  
  const imageCount = event.detail.imageCount ?? 0;

  for (let count = 0; count < imageCount; count++) {
    const image = imageTemplate.content.cloneNode(true);

    basket.appendChild(image);
  }
  
  basket.dataset.imageAddRequestCount = imageAddRequestCount + 1;
});

button1.addEventListener("click", (event) => {
  basket.dispatchEvent(new CustomEvent("App.ImageAddRequest", {
    detail: {
      imageCount: 1,
    },
  }));
});

button5.addEventListener("click", (event) => {
  basket.dispatchEvent(new CustomEvent("App.ImageAddRequest", {
    detail: {
      imageCount: 5,
    },
  }));
});
</script>