javascript - When more than 1 div append, the dropdown option increases which I retrieve from DB

Question

Before 2 div append, my dropdown looks like:

But as soon as I click the button to append another div it looks like this:

Here is my code for the button in 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>

And jquery code:

    $(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' %}";
                }
            });
        });
    });

This is my code, Firstly I apologize for some Bengali word. These are just label names. id's and class names are written in English. Thanks in advance.

Answer 1

You are using $(".product_option") this will target all selects with that class and append new options to it that's the reason you are seeing duplicate. Instead you can use $(".item-wrapper-" + div_title).find(.. this will find select-box where options needs to be added .

Demo Code :

$(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);
    /* 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 = "ABC";
    var buying_price = 100;
    var selling_price = 50;
    var total = product_name + " | " + selling_price;
    //get the item div which is added then append options to that
    $(".item-wrapper-" + div_title).find(".product_option").append('<option>' + total + '</option');

    /*
    //some ..codes..
       });
          })
      } else {
        window.location.href = "{% url 'login' %}";
      }
    });*/
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productDiv"></div>
<div class="mt-3 text-center"><button class="btn profile-button" style="color: white" type="button" id="btnAddtoList">???? ??? ????</button></div>