Javascript 当超过1个div append时，我从DB中检索的下拉选项会增加

在2 div append之前，我的下拉列表如下所示：

但是，只要我单击按钮添加另一个div，它就会如下所示：

以下是我的html按钮代码：

    <div class="productDiv"></div>
    <div class="mt-3 text-center"><button class="btn profile-button" style="color: white" 
    type="button" id="btnAddtoList">পণ্য যোগ করুন</button></div>

পণ্য যোগ করুন

和jquery代码：

    $(function() {
    let divCount = 0;
     $('#btnAddtoList').on('click', function(){
     divCount++;
     const div_title = divCount;
     var newDiv = $(
     `<div class=item-wrapper-${div_title}>` +
     '<div class="container rounded bg-white mt-3 mb-3">' +
      '<div class="row">' +
       '<div class="col-md-12">' +
        '<div class="row mt-3">' +
          '<span><strong>পণ্যের বিবরণ #</strong></span>'+ div_title +
         </div>' +
         '<div class="row mt-1">' +
           '<select class="product_option form-control" id="product" data-search="true">' +
              '<option disabled selected> -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য) -- </option>' +
           '</select>' +
         '</div>' +
         '<div class="row mt-3">' +
          '<label class="labels" style="font-size: 16px">পণ্যের নাম</label><input type="text" 
           class="form-control" id="productName">' +
         '</div>' +
         '<div class="row mt-3">' +
          '<label class="labels" style="font-size: 16px">বিক্রয় মূল্য</label><input type="text" 
           class="form-control" id="sellPrice">' +
         '</div>' +
         '<div class="row mt-3">' +
          '<label class="labels" style="font-size: 16px">পরিমাণ</label><input type="number" 
           class="form-control" id="amount">' +
         '</div>' +
         '<div class="mt-3 d-flex flex-column align-items-center text-center">
           <button class="btn btn-danger deleteItem" type="button">মুছুন</button></div>' +
         '</div>' +
        '</div>' +
       '</div>' +
      '</div>');
      $('.productDiv').append(newDiv);
      console.log(div_title);
      firebase.auth().onAuthStateChanged(function(user) {
      console.log(user);
       if (user) {
          var user_id = user.uid;          
          firebase.database().ref('Products/').child(user_id).once('value')
          .then(function(snapshot){
             snapshot.forEach(function(childSnapshot) {
               var product_name = childSnapshot.child("product_name").val();
               var buying_price = childSnapshot.child("buying_price").val();
               var selling_price = childSnapshot.child("selling_price").val();
               var total = product_name + " | " + selling_price;
               console.log(total);
               $(".product_option").append('<option>' + total + '</option');
               $(document).on("change", ".product_option", function () {
                 const valArr = $(`.item-wrapper-${div_title} .product_option 
                  option:selected`).text().split(" | ");
                 console.log(valArr);
                 $(`div.item-wrapper-${div_title} #productName`).val(valArr[0]);
                 $(`div.item-wrapper-${div_title} #sellPrice`).val(valArr[1]);
                 });
               $(document).on("click", ".deleteItem", function() {
                 $(this).closest(`.item-wrapper-${div_title}`).remove();
                       });
                   });
               })
                 }
                else{
                    window.location.href="{% url 'login' %}";
                }
            });
        });
    });

$（函数（）{
设divCount=0；
$（'btnAddtoList'）。在（'click'，function（）上{
divCount++；
const div_title=divCount；
var newDiv=$(
`` +
'' +
'' +
'' +
'' +
“পণ্যের বিবরণ #'+div_标题+
' +
'' +
'' +
' -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য) -- ' +
'' +
'' +
'' +
'পণ্যের নাম' +
'' +
'' +
'বিক্রয় মূল্য' +
'' +
'' +
'পরিমাণ' +
'' +
'
মুছুন' +
'' +
'' +
'' +
'');
$（'.productDiv'）.append（newDiv）；
控制台日志（分区标题）；
firebase.auth（）.onAuthStateChanged（函数（用户）{
console.log（用户）；
如果（用户）{
var user_id=user.uid；
firebase.database（）.ref（'Products/'）.child（用户id）.once（'value'））
.then（功能（快照）{
snapshot.forEach（函数（childSnapshot）{
var product_name=childSnapshot.child（“product_name”）.val（）；
var buying_price=childSnapshot.child（“buying_price”）.val（）；
var selling_price=childSnapshot.child（“selling_price”）.val（）；
var总计=产品名称+“|”+售价；
控制台日志（总计）；
$（“.product\u option”）.append（“+total+”您正在使用的
$（“.product\u option”）
这将针对该类的所有选择并向其追加新选项，这就是您看到重复的原因。相反，您可以使用
$（“.item wrapper-”+div\u title）。查找（..
这将找到需要添加选项的选择框

演示代码：


$（函数（）{
设divCount=0；
$（'btnAddtoList'）。在（'click'，function（）上{
divCount++；
const div_title=divCount；
var newDiv=$(
`` +
'' +
'' +
'' +
'' +
“পণ্যের বিবরণ #'+div_标题+
'' +
'' +
'' +
' -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য) -- ' +
'' +
'' +
'' +
'পণ্যের নাম ' +
'' +
'' +
'বিক্রয় মূল্য ' +
'' +
'' +
'পরিমাণ ' +
'' +
'  মুছুন  ' +
'' +
'' +
'' +
'');
$（'.productDiv'）.append（newDiv）；
/*firebase.auth（）.onAuthStateChanged（函数（用户）{
console.log（用户）；
如果（用户）{
var user_id=user.uid；
firebase.database（）.ref（'Products/'）.child（用户id）.once（'value'））
.then（功能（快照）{
snapshot.forEach（函数（childSnapshot）{*/
var product_name=“ABC”；
var买入价格=100；
var卖出价格=50；
var总计=产品名称+“|”+售价；
//获取添加的项目div，然后将选项附加到该项目
$（“.item wrapper-”+div\u title）。查找（“.product\u option”）。追加（“”+total+“”）