firebase データの消去処理

Question

firebaseでスケジュール共有するアプリを試作しています。
データをfirebaseに送り、返ってくるとことまではうまくいきました。

返ってきた各スケジュール内容に完了ボタンを付属しています。
この完了ボタンを押すと各スケジュールを消去できる様式です。
Todoリストの扱いのようなイメージです。
が、このボタンが反応しません。
##idのつけ方が悪いのでしょうか？
試行錯誤しましたが知識が乏しく全く反応が見られません。
どなたかご教授お願いいたします。

// データをfirebaseからリアルタイムに取得する処理
 db.orderBy('date', 'asc').onSnapshot(function (querySnapshot) {
            let str = '';
            querySnapshot.forEach(function (doc) {
                // alert('ok');
                // console.log(doc.id);
                // console.log(doc.data());

                str += '<div class="str" id="' + doc.id + '">';
                str += '<p class="str1">' + doc.data().date + '</p>';
                str += '<p class="str1">' + doc.data().name + '</p>';
                str += '<p class="str2">' + doc.data().text + '</p>';
                str += '<button class="comp" id="comp">完了</button>';
                str += '</div>'
            });

    
            $('#schedule').html(str); //今後のスケジュールとして代入

        });


        //完了ボタンをクリックで、予定を消去する処理



        $("#comp").click(function () {
            console.log('ok')
       //ここでの　comp　が反応しません。。

        });

Answer 1

全体のHTMLやFirebaseのデータがわからないので未検証ですが、次のように修正したらうまくいきませんか。

$("#comp").click(function () {
  console.log('ok')
  //ここでの　comp　が反応しません。。
});

↓

$('#schedule').on("click", ".comp", function(){
  console.log('ok')
});

Comments

[ysk_m]

ご回答ありがとうございます。
ですが、反応しませんでした。コードを全て載せていな方ので分かりづらくなりすみません。
変数 i でcomp++する手法も試しましたが、全てcomp1として反映されました。上記のforEachの影響でしょうか？素人なもので良く分からずすみません。
let i = 0;
i++;
str += '<div class="str" id="' + doc.id + '">';
str += '<p id="name2" class="str1">' + doc.data().date + '</p>';
str += '<p class="str1">' + doc.data().name + '</p>';
str += '<p class="str2">' + doc.data().text + '</p>';
str += '<button class="comp" id="comp' + i + '">完了</button>';
str += '</div>'

});