ボタン入力で画像表示

Question

ボタン入力でりんごの画像を表示するプログラムを作成しているのですが、
例）　
ボタン１を入力　→ りんごが１つ表示
ボタン５を入力　→ りんごが５つ表示
imgでりんごを挿入して非表示にして、ボタンが入力された時に表示しています。

　<!--りんご挿入-->
　　<!--１個-->  
    <div id="r1">
    <img src="apple1.png"alt="りんご画像"width="40px"></div>
　　<!--5個-->
    <div id="r5"> 
    <img src="apple1.png"alt="りんご画像"width="40px">
    <img src="apple1.png"alt="りんご画像"width="40px">
    <img src="apple1.png"alt="りんご画像"width="40px">
    <img src="apple1.png"alt="りんご画像"width="40px">
    <img src="apple1.png"alt="りんご画像"width="40px"></div>

　<!--ボタン-->
   <!--ボタン１-->　
  <input type="button" value="- 1 -"onclick="document.getElementById('r1').
    style.visibility='visible'";>
   <!--ボタン１-->　
  <input type="button" value="- 5 -"onclick="document.getElementById('r5').
    style.visibility='visible'";>

   /*りんご非表示*/
   #r1{
    visibility: hidden;  
   }
   #r5{
    visibility: hidden;  
   }

ボタン１を入力した後にもう一度ボタン１を入力してもりんごは１つしか表示されません。
**### ボタン１を入力してりんごが1つ表示された後にもう一度ボタン１を押せばもう一つ（計２つ）表示される
プログラム**が作成したいです。

他に試そうとしたことがあるのですが理解できずに断念しましたが一様書きます。

ボタン１を入力すると非表示にしたりんごを一つ複製して表示させる方法です。
https://liginc.co.jp/458298　こちらのサイトを参考にしたのですが、
任意の数をボタンで表示する方法がわからず断念しました。

Answer 1

ごくシンプルに書くならこんな感じでしょうか

<div id='1' style='display:none'>
    <img src="apple1.png"alt="りんご画像"width="40px">
</div>

<div id='2'></div>

<input type="button" value="- 1 -" onclick='append(1)'>
<input type="button" value="- 5 -" onclick='append(5)'>


<script>
function append(num){
    const obj = document.getElementById('1').getElementsByTagName('img')[0];
    for(i = 0; i < num; i++){
        document.getElementById('2').appendChild(obj.cloneNode(true))
    }

}
</script>

スタイルの書き方などは微妙ですが

Answer 2

サンプルを作成してみましたので参考にしてください。

• デモ - JSFiddle

<div id="basket"></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");

basket.addEventListener("App.ImageAddRequest", (event) => {
  const imageCount = event.detail.imageCount ?? 0;
  
  for (let count = 0; count < imageCount; count++) {
    const image = imageTemplate.content.cloneNode(true);
    
    basket.appendChild(image);
  }
});

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>

追記

この処理は２回までとかもできるのでしょうか？
１を押し１個表示され５を押し５個表示され　３回目以降は押しても表示できなくなる感じです。

ボタンを押した回数をどこかに保存しておいて、画像追加処理の部分で判定してください。

• デモ - JSFiddle

<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>

Comments

[m.aru8]

思っていた通りの処理になりました。有難う御座います。ちなみにこの処理は２回までとかもできるのでしょうか？
１を押し１個表示され５を押し５個表示され　３回目以降は押しても表示できなくなる感じです。

[KAOsaka]

追記しました。追加の質問についてはご自分である程度試行錯誤していただいた後に、新しく質問を立ち上げるのが良いと思われます。

[m.aru8]

承知しました、今回は本当に助かりました。
有難う御座いました。