Develop Reference

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

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.

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>

How to Display Recent message in MessageBox?

I'm using jquery and javascript to display messages, in backend I'm reversing list of messages but it displaying first message but I need recent sent and received message.
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base')[0].scrollHeight
});
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}
var str = '<div class="popup-box chat-popup chat-window" id="channel-'
+ channelId
+ '">'
+ ' <div class="col-xs-12 col-md-12">'
+ ' <div class="panel panel-default">'
+ ' <div class="top-bar">'
+ ' <div class="col-md-9 col-xs-9">'
+ '<img src="'
+ imageName
+ '" class="img-chat-box img-thumbnail" >'
+ '<span>'
+ name
+ '</span>'
+ '</div><div class="col-md-3 col-xs-3" style="text-align: right;">'
+ '<span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span>'
+ ' <a href="javascript:close_popup(\''
+ channelId
+ '\')"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>'
+ ' </div></div>'
+ '<div class="panel-body msg_container_base">'
+ '<input type="hidden" name="friendId" id="friendId" value="'
+ toUserId
+ '"/>'
+ '<input type="hidden" name="channelId" id="channelId" value="'
+ channelId
+ '"/>'
+ '<input type="hidden" name="chatType" id="chatType" value="'
+ chatType
+ '"/>'
+ '</div>'
+ '<div class="panel-chat-footer">'
+ '<div class="input-group">'
+ '<input id="txtSendMessage" type="text"'
+ 'class="chat-text-box input-sm chat_input"'
+ ' placeholder="Write your message here..." required="required" /> <span'
+ ' class="input-group-btn">'
+ '<button class="btn btn-primary btn-sm" id="sentMessageBtn">Send</button>'
+ '</span>' + '</div>' + '</div>' + '</div>';
html = $.parseHTML(str), $("body").append(html);
Its displaying first message but I need recent message which is sent or received.chat image displaying first message.

try to use the latest method
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base').prop("scrollHeight")
},1000);
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}

How to use loop inside append in jQuery function

i would like to append a new html code, buy clicking a button. however in the append there are a looping to show the html code.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
$.each(day_left,function (i,val) {
$('<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>');
})+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>
actually i could append the html. But there is a bug in my $.each(day_left,function(i,val)){});
its only return the value of day_left which they are like sunday,monday,.... The code doesn't show the html code
My expected is it would be returned like this
but my code is only return :

Please make a function like this
function makeString(day_left,stack){
var str = '';
for(var i = 0; i <= day_left.length ; i++ ){
str += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+day_left[i]+'</label> </li>';
}
return str;
}
and change as following
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
makeString(day_left,stack)+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
plnkr https://plnkr.co/edit/aBLj49Yv2g4EakeKjlqI?p=preview

you can do like that......
just use return function or make you iteration returnable.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Solved
function(){var s='';
$.each(day_left,function (i,val) {
s += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>';
});
return s;}
+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>

Finding the current id of an object and appending it dynamically

I have been trying to add a dynamic object to another dynamic object. Below I have a short code on what I am trying to do. It is having trouble for some reason to find the id again.
First block that creates the second block:
var comp_idx = 0;
function addComponent() {
var html = '<div id="comp_row' + comp_idx + '" class="row padding610">' +
'<h5>Component</h5>' +
'<div class="row">' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_note' + comp_idx + '">Component Notes</label>' +
'<input name="comp_note' + comp_idx + '" type="text" id="comp_note' + comp_idx + '" />' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_sku' + comp_idx + '">Component SKU/Description</label>' +
'<input name="comp_sku' + comp_idx + '" type="text" id="comp_sku' + comp_idx + '" />' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_quantity' + comp_idx + '">Quantity</label>' +
'<input name="comp_quantity' + comp_idx + '" type="text" id="comp_quantity' + comp_idx + '" />' +
'</div>' +
'</div>' +
'</div>' +
'<h5>RMAT Material SKUs Needed</h5>' +
'<div class="row" style="margin-bottom:10px;">' +
'<input type="button" id="add-button-comp' + comp_idx + '" value="Add Additional Raw Materials" onclick="addRMATComp()" />' +
'</div>' +
'<div id="rmatsComp' + comp_idx + '" class="brown lighten-2"></div>' +
'<div class="row" style="margin-bottom:10px;">' +
'<input type="button" id="add-button-comp' + comp_idx + '" value="Add Non Machine Charges To Component" onclick="addNmcQuoteItemComp()" />' +
'</div>' +
'<div id="NonMachineQuoteComp' + comp_idx + '" class="brown lighten-4"></div>' +
'<div class="row">' +
'<div class="col s12">' +
'<div class="input-field"><a onclick="removeElement(\'comp_row' + comp_idx + '\');" id="delete-icon"' + 'class="waves-effect waves-teal btn-del-comp">Delete Component</a>' +
'</div>' +
'<div class="row">' +
'<div class="divider-row"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('#ComponentDetails').append(html);
comp_idx++;
$('select').select2();
}
The second function that creates the other element:
var rmatComp_idx = 0;
function addRMATComp() {
var html =
'<div id="rmatComp_row' + rmatComp_idx + '" class="row padding2">' +
'<div class="row">' +
'<div class="col s4">' +
'<div class="input-field">' +
'<select id="comp_rmat_type' + rmatComp_idx + '" name="comp_rmat_type' + rmatComp_idx + '" class="browser-defaultR" onchange="loadRmatByType(\'comp_rmat_type' + rmatComp_idx + '\',\'comp_rmat_select' + rmatComp_idx + '\')">' +
'<?php echo str_replace('\'', '"', $rmatStockTypeOptions); ? > ' +
'</select>'+
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<select id="comp_rmat_select' + rmatComp_idx + '" name="comp_rmat_select' + rmatComp_idx + '" class="browser-defaultR" onchange="loadRmat(\'comp_rmat_type' + rmatComp_idx + '\',\'comp_rmat_select' + rmatComp_idx + '\',\'comp_rmat_desc' + rmatComp_idx + '\',\'comp_rmat_cost' + rmatComp_idx + '\',\'comp_rmat_markup' + rmatComp_idx + '\',\'comp_rmat_unit' + rmatComp_idx + '\')">' +
'</select>' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_rmat_desc' + rmatComp_idx + '">Description</label>' +
'<input name="comp_rmat_desc' + rmatComp_idx + '" type="text" id="comp_rmat_desc' + rmatComp_idx + '" />' +
'</div>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_qty' + rmatComp_idx + '">Quantity</label>' +
'<input name="comp_rmat_qty' + rmatComp_idx + '" type="number" id="comp_rmat_qty' + rmatComp_idx + '" class="comp_rmat_qty" ' + 'onblur="calculateRMAT(' + rmatComp_idx + ')"/>' +
'</div>' +
'</div>' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_cost' + rmatComp_idx + '">Cost</label>' +
'<input name="comp_rmat_cost' + rmatComp_idx + '" type="number" id="comp_rmat_cost' + rmatComp_idx + '" step="0.01" class="comp_rmat_cost" ' + 'onblur="calculateRMAT(' + rmatComp_idx + ')"/>' +
'</div>' +
'</div>' +
'<div class="col s2">' +
'<div class="input-field">' +
'<label for="comp_rmat_true_cost' + rmatComp_idx + '">Cost Without Markup</label>' +
'<input name="comp_rmat_true_cost' + rmatComp_idx + '" type="number" id="comp_rmat_true_cost' + rmatComp_idx + '" step="0.01" ' + 'onblur="calculateRMAT(' + rmatComp_idx + ')" readonly/>' +
'</div>' +
'</div>' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_markup' + rmatComp_idx + '">Markup</label>' +
'<input name="comp_rmat_markup' + rmatComp_idx + '" type="number" id="comp_rmat_markup' + rmatComp_idx + '" step="0.001" class="comp_rmat_markup"' + 'onblur="calculateRMAT(' + rmatComp_idx + ')"/>' +
'</div>' +
'</div>' +
'<div class="col s2">' +
'<div class="input-field">' +
'<label for="comp_rmat_extended' + rmatComp_idx + '" class="active">Extended</label>' +
'<input name="comp_rmat_extended' + rmatComp_idx + '" type="text" id="comp_rmat_extended' + rmatComp_idx + '" readonly/>' +
'</div>' +
'</div>' +
'<div class="col s1">' +
'<div class="input-field">' +
'<label for="comp_rmat_unit' + rmatComp_idx + '">Unit of Measure</label>' +
'<input name="comp_rmat_unit' + rmatComp_idx + '" type="text" id="comp_rmat_unit' + rmatComp_idx + '" readonly/>' +
'</div>' +
'</div>' +
'<div class="col s4">' +
'<div class="input-field">' +
'<label for="comp_rmat_instructions' + rmatComp_idx + '">RMAT Instructions</label>' +
'<input name="comp_rmat_instructions' + rmatComp_idx + '" type="text" id="comp_rmat_instructions' + rmatComp_idx + '" />' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col s12">' +
'<div class="input-field">' +
'<a onclick="removeElement(\'rmatComp_row' + rmatComp_idx + '\');" id="delete-icon" ' + 'class="waves-effect waves-teal btn-flat btn-del-row">Delete RMAT Row</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('#rmatsComp' + rmatComp_idx + '').append(html);
//console.log(html);
rmatComp_idx++;
$('select').select2();
alert(comp_idx);
}
The rmatsComp is created dynamically on another function. Below is the button:
<input type="button" id="add-button-comp0" value="Add Additional Raw Materials" onclick="addRMATComp()">
If anyone can see the issue or point me in the right direction, I would appreciate it.
Here is an example i wrote to make it smaller. Hopefully its clear what I want to do.

Javascript syntax error: TypeError: 'undefined' is not a constructor

i recieve this error when i launching my javascript below:
if(isPartOfIndex(new Array[25,20], indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
The error message displayed is:
TypeError: 'undefined' is not a constructor (evaluating 'new
Array[25,20]')
here is the isPartOfindex which expects an array as the first parameter
function isPartOfIndex(indexRow, indexType){
for(var i = 0; i < indexRow.length; i++){
if(indexRow[i] == indexType){
return true;
}
}
return false;
}
What am i doing wrong?
Thanks

Should be new Array(25, 20) or just [25, 20]

you need to change your code to:
if(isPartOfIndex(new Array(25,20), indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
new Array[25,20] is not proper declaration for your array.

Just need [20, 25] instead of new Array[20, 25]. You also can use new Array(20, 25)