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>

JS append function breaks form field iteration

I have a conditional function (addAtn) that appends an extra field to a dynamic form if required. The main form is built once the number of items is selected.
All the elements of the function are tested and work, but when I try to call it from the ticketQuantity function it breaks, and only ever returns 1 ticketDetail row, without the extra append.
The addAtn function is
$.get('/sellers/' + venueId + '/atn', function(data) {
if (data['field']=="atn") {
function addAtn() {
ticketDetails.append(
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-4 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">UTN (unique ticket number)</label>' +
'<input type="text" class="form-control utn" placeholder="" name="ticket[' + i + '][utn]">' +
'</div>' +
'</div>'
);
};
}
else {
function addAtn() {};
}
});
The ticketQuantity function on select is
$('#ticketQuantity').on('change', function () {
var ticketQuantity = $('#ticketQuantity').val();
var ticketDetails = $('#ticketDetails');
var previewTicketBtn = $('#previewTicketBtn');
ticketDetails.html('<p>For general admission tickets enter "GA" in Seat Number box.</p>');
if (ticketQuantity == 1) {
$('#split-tickets').hide();
} else {
$('#split-tickets').show();
}
$('#ticket-rows').html('');
for (var i = 1; i <= ticketQuantity; i++) {
ticketDetails.append('<hr><p class="ticket-details" style="margin-top: 30px;"><strong>Ticket ' + i + '</strong></p>' +
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Seat number</label>' +
'?' +
'<input type="text" class="form-control seatNumber" placeholder="" name="ticket[' + i + '][seat_number]">' +
'</div>' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Ticket face value</label>' +
'<div class="input-group">' +
'<span class="input-group-addon">£</span>' +
'<input type="text" class="form-control ticketFaceValue" name="ticket[' + i + '][ticket_face_value]">' +
'</div>' +
'</div>' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Asking price</label>' +
'<div class="input-group">' +
'<span class="input-group-addon">£</span>' +
'<input type="text" class="askingPrice last-ticket-input form-control" name="ticket[' + i + '][asking_price]">' +
'</div>' +
'</div>' +
'</div>' +
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-6" col-sm-12 col-xs-12>' +
'<label class="control-label text-muted">Restrictions</label>' +
'<input type="text" class="form-control restrictions" placeholder="Please enter any restrictions here, for example Child or ID required" name="ticket[' + i + '][restrictions]">' +
'</div>' +
'</div>');
addAtn();
});
Can anyone help. I can't work out what I'm doing wrong.
Thanks.

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>

How to create dynamic radio button using javascript

Hi my task is to dynamically add fields to a form when I click on a link.
I was successfull for text field, as well as file type, but not when I try to do this for inputs of type radio button.
Suppose I have created two rows and in one row I select gender, e.g. male, and in second row I want to select female then it will disappear the value of radio button from the first row. So I want to select different radio button values for different multiple rows.
Here is my code:
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'</br><strong>Item ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="item[]' + '" type="text" />'
+'<strong>quantity ' + counter + '</strong>'
+'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />'
+'<strong>rate ' + counter + '</strong>'
+'<input id="rate' + counter + '" name="rate[]' + '" type="text" />'
+'<strong>Amount ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="amount[]' + '" type="text" />'
+'<strong>img ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="image[]' + '" type="file" />'
+'<strong>Gender ' + counter + '</strong>'
+'<input id="male_' + counter + '" name="gender[]' + '" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender[]' + '" type="radio" value="female"/>female'
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="custom.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
<div id="container">
<p id="add_field"><span>Add Field</span></p>
</div>
<input type="submit" name="submit_val" value="Submit" />
</form>
Please let me know where I am wrong.

Only one radio button can be selected from a list of radio button which have the same name. i.e why you are not able to select radio button for each row. To solve this, make use of counter to give separate names to each row that you add, like
'<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'</br><strong>Item ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="item[]' + '" type="text" />'
+'<strong>quantity ' + counter + '</strong>'
+'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />'
+'<strong>rate ' + counter + '</strong>'
+'<input id="rate' + counter + '" name="rate[]' + '" type="text" />'
+'<strong>Amount ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="amount[]' + '" type="text" />'
+'<strong>img ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="image[]' + '" type="file" />'
+'<strong>Gender ' + counter + '</strong>'
+'<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender' + counter + '[]" type="radio" value="female"/>female'
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
<div id="container">
<p id="add_field"><span>Add Field</span></p>
</div>
<input type="submit" name="submit_val" value="Submit" />
</form>
</body>
</html>

When you add more radio button your all radio button name is same, that's why you was select only one radio button.
So, Change your radio button like this :
+'<input id="male_' + counter + '" name="gender_'+counter+'[]" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender_'+counter+'[]" type="radio" value="female"/>female'

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.