任意で生成した複数のボタンに対して、クリックごとに文字と色を変更させる方法

はじめまして。現在、javascriptの勉強をしております。はじめて、質問をさせていただきますが、よろしくお願いいたします。

作ろうとしているもの

下記の様な動作をするモノを作っております。

１：はじめに、任意のボタンの数を入力

２：ボタンをクリックする度に下記の条件として考えています。
・文字が変更（１～５）初期値は０
・ボタンの色を変更
・繰り返し使える(１～５)０は除外
・それぞれのボタンが独立して、上記３つの動作が出来る

発生している問題・エラーメッセージ

１：で任意のボタンを生成させ、１つめのボタンは期待値通りの動作をするのですが、それ以降に生成したボタンが反応しません。

Chromeのデベロッパーツールのコンソールで見てもエラーが出ておらず
各ボタン生成時に、IDに対してID数字のようにつけていって、個々のボタンに対して、繰り返し処理といった様な考えあったのですが、実装方法がわからず、次に進めない状態です。

該当のソースコード

HTML,CSS,Javascriptの3つをまとめたコードが下記になります。

<html>
<body>
<style>
.html, .body{
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
}

.button{
    width:200px;
    height:80px;
    border:1px solid #f1f1f1;
    outline:none;
    background: #95a5a6;
}
.status{
    font-size:24px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
    font-weight:500;
    color:white;
}

</style>
      <div class="content">
        <div id="parent">
              <div id="child" class="cl">
              </div>
            </div>
        </div>
        <script>
window.addEventListener('DOMContentLoaded', function(){
                let seat = prompt("ボタン数を入力してください");
                for (i=0; i<seat; i++){
                let elem = document.createElement('div'); 
                elem.id = 'child';
                elem.className = 'parent';
                elem.innerHTML = '<button type="button" id="tap" class="button"><span class="status">0</span></button>';                
                let parent = document.getElementById('parent');
                parent.appendChild(elem);
}}, false)

            document.addEventListener('click', function(i){
              let tap=document.getElementById('tap');
              tap.style.backgroundcolor='#95a5a6';
              tap.dataset['color']='#95a5a6';
              tap.addEventListener('click',function(){
                switch(tap.dataset['color']){
                case '#e74c3c':
                  tap.style.backgroundColor='#3498db';
                  tap.dataset['color']='#3498db';
                  tap.querySelector('span').textContent='2';
                  break;
        
                  case '#3498db':
                  tap.style.backgroundColor='#2ecc71';
                  tap.dataset['color']='#2ecc71';
                  tap.querySelector('span').textContent='3';
                  break;
        
                  case '#2ecc71':
                  tap.style.backgroundColor='#f1c40f';
                  tap.dataset['color']='#f1c40f';
                  tap.querySelector('span').textContent='4';
                  break;
        
                  case '#f1c40f':
                  tap.style.backgroundColor='#95a5a6';
                  tap.dataset['color']='#95a5a6';
                  tap.querySelector('span').textContent='5';
                  break;
                default:
                  tap.style.backgroundColor='#e74c3c';
                  tap.dataset['color']='#e74c3c';
                  tap.querySelector('span').textContent='1';
                  break;
                }
              });
            },false);
            </script>

</body>
    </html>

補足情報（FW/ツールのバージョンなど）

Windows10
Chrome：バージョン: 77.0.3865.90（Official Build）（64 ビット）
VisualStudioCode

kyoya0819

2019/10/03 23:47

文字は0->1->2->3->4->5->1->2..ということでいいのでしょうか？

退会済みユーザー

2019/10/03 23:56

asuchi0819様ご質問いただき、ありがとうございます。はい。ご指摘の通り、0は初回のみで、5からは1に戻り、繰り返すものを想定しております。

行動規範の内容に同意します

回答3件

JavaScript
1            document.addEventListener('click', function(i){
2              //let tap=document.getElementById('tap');
3              let tap = i.target.closest('button.button');
4              if (!tap) {
5                return true;
6              }
7
8              //tap.style.backgroundcolor='#95a5a6';
9              //tap.dataset['color']='#95a5a6';
10              //tap.addEventListener('click',function(){ // 後ろも