Develop Reference

div delete after button click isn't working properly. Also not maintaining sequence

When I append div one by one, it's working properly. but when I delete the first one or any from the previous one, it's not deleting properly. And if once again I want to append another div div-number is not maintaining sequence. Actually, I want to build a system where users can add products and also can delete the product during invoice generation. so please help me with how these kinds of stuff can be maintained. Also, I need to calculate the subtotal amount of individual products with individual div. Here is my code:
<script type="text/javascript">
let divCount = 0;
$(function() {
$('#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 text-center">' +
'<select class="product_option form-control" id="product">' +
'<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="number" class="form-control" id="sellPrice">' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">পণ্য মজুদ আছে </label>
<input type="text" class="form-control" id="amount" ">' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">পরিমাণ</label>
<input type="number" class="form-control quantity_pro" id="quantity" ">' +
'</div>' +
`<div class="mt-3 d-flex flex-column align-items-center text-center">
<button class="btn btn-danger deleteItem" id=del-${div_title}
type="button">মুছুন
</button>
</div>` +
'</div>' +
'</div>' +
'</div>' +
'</div>');
$('.productDiv').append(newDiv);
console.log(div_title);
$(".item-wrapper-" + div_title).find(".product_option").select2({
theme: "classic"
});
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 selling_price = childSnapshot.child("selling_price").val();
var amount = childSnapshot.child("product_quantity").val();
{#console.log(amount)#}
var total = product_name + " | " + selling_price + " | " + amount;
console.log(total);
$(".item-wrapper-" + div_title).find(".product_option").append('<option>'
+ total + '</option');
$(document).on("change", ".product_option", function () {
const valArr = $(`.item-wrapper-${div_title} .product_option
option:selected`).text().split(" | ");
$(`div.item-wrapper-${div_title} #productName`).val(valArr[0]);
$(`div.item-wrapper-${div_title} #sellPrice`).val(valArr[1]);
$(`div.item-wrapper-${div_title} #amount`).val(valArr[2]);
});
});
})
}
else{
window.location.href="{% url 'login' %}";
}
});
});
$("#subTotal").on('click', function (e) {
var subTotalAmount = 0;
for (var i = 1; i<=divCount; i++){
var getProductName = $(`div.item-wrapper-${i} #productName`).val();
var getSellingPrice = $(`div.item-wrapper-${i} #sellPrice`).val();
var getAmount = $(`div.item-wrapper-${i} #amount`).val();
var getQuantity = $(`div.item-wrapper-${i} #quantity`).val();
subTotalAmount += getSellingPrice*getQuantity;
}
var SellingPriceFloat = parseFloat(getSellingPrice);
var amountFloat = parseFloat(getAmount);
console.log(amountFloat)
var quantityFloat = parseFloat(getQuantity);
console.log(quantityFloat);
console.log(subTotalAmount)
if (quantityFloat>amountFloat){
alert("পর্যাপ্ত পরিমান পণ্য নেই ।");
}
else {
// executes only once
var subDiv = $(
'<div class="item-wrapper">' +
'<div class="container rounded bg-white mt-3 mb-3">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="row mt-3">' +
'<span class="col-md-12">সাব টোটালঃ</strong></span>'
+subTotalAmount +
'</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">' +
'<span class="col-md-12"><strong>মোটঃ</strong></span>'+
'</div>' +
'<div class="mt-3 d-flex flex-column align-items-center text- center">
<button class="btn btn-info" type="button">মোট</button></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
$('.subTotalDiv').html(subDiv);
}
});
$(document).on("click", ".deleteItem", function() {
$(this).closest(`.item-wrapper-${divCount}`).remove();
divCount-=1;
});
});
</script>
here is my 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>
<div class="mt-3 text-center">
<button class="btn profile-button" style="color: white" type="button"
id="subTotal" >সাব টোটাল</button>
</div>
<div class="subTotalDiv"></div>
You can see that two div with the same div number:
Thanks in advance.

You have many important issues in that code.
You are creating some dynamic elements having always the same id.
An id must be unique. NEVER use an id in a loop or in an event handler that appends elements.Use a class instead.
When you have more than one or two lines of HTML concatenated in a string for some appending... Better use the .clone() method on a "template" hidden in the HTML.
That makes your code more readable and maintainable, since the "template" to clone will appear as regular HTML in your code editor, so you can see typos right away.
And the JS is then more concise.
The main advantage of using jQuery is its ease to "traverse" the DOM using easy and short methods.
From a user action (like from a event triggered on a <select> element)... Use the wide set of method like .parent(), .closest(), .find(), .siblings(), etc... to target the elements you want.
Reminder for your future coding: Every time you have to add a number to a class to make it unique... Take it as a symptom of a bad coding. While an id must be unique to target ONE element, a class must be "generic" to target a set of similar elements.
I COMPLETELY removed your "concept" of having the divCount an div_title variable in the below snippet.
Your issue was NOT about how to correctly use it... But how to NOT use it. ;)
Function nesting.
You used event delegation: $(document).on("change", ".product_option", function () {...}
Nice! But that is inside the Firebase callback.
And the Firebase request is inside the btnAddtoList click handler.
So every times the user click on the পণ্য যোগ করুন (Add products) button, there is a request made to the database (most probably with the same result). And an additional delegated handler for all .product_option select in the page is setted.
It does not looks too good right?
And that was due to your (failed) attempt to use some "unique" item-wrapper-* classes...
So below is your code changed a lot. I did not dive into your Firebase request because I really don't know the structure of the response. I "assumed" a response with the snapshot array of objects. You may have something quite different.
Have a close look at the code and all the comments.
console.clear();
$(function () {
// Add a cloned div
$("#btnAddtoList").on("click", function () {
// Clone the template and toggle some classes
let newDiv = $(".item-wrapper_template")
.clone()
.toggleClass("item-wrapper_template item-wrapper");
// Append
newDiv.find(".number").text($(".item-wrapper").length + 1);
$(".productDiv").append(newDiv);
// Instantiate Select2
newDiv.find(".product_option").select2({
theme: "classic"
});
});
// Delete a cloned div
$(document).on("click", ".deleteItem", function () {
// Remove the whole wrapper div that holds the .deleteItem button
$(this).closest(".item-wrapper").remove();
// Update the numbers of the other items
$(".item-wrapper").each(function (num) {
$(this)
.find(".number")
.text(num + 1);
});
});
// Calculate the sub total
$("#subTotal").on("click", function (e) {
// At each click event, start the calculation at zero
let subTotalAmount = 0;
// How many items now?
let itemCount = $(".item-wrapper").length;
// A flag to know if we break the loop
let loopBreak = false;
// Looping all the items
for (let i = 0; i < itemCount; i++) {
let getSellingPrice = parseFloat(
$(".item-wrapper").eq(i).find(".sellPrice").val()
);
let getAmount = parseFloat(
$(".item-wrapper").eq(i).find(".amount").val()
);
let getQuantity =
parseFloat($(".item-wrapper").eq(i).find(".quantity").val()) || 0;
// A condition check which may break the loop
if (getQuantity > getAmount) {
alert("পর্যাপ্ত পরিমান পণ্য নেই ।"); // There are not enough products.
loopBreak = true;
break;
} else {
subTotalAmount += getSellingPrice * getQuantity;
console.log("subTotalAmount", subTotalAmount);
}
} // END for loop
// If the loop was not broken
if (!loopBreak) {
$(".subTotalDiv").find(".subTotalAmount").text(subTotalAmount);
$(".subTotalDiv").show();
}
});
// Option change handler for ALL select element present on the page
$(document).on("change", ".product_option", function () {
const valArr = $(this).find("option:selected").text().split(" | ");
$(this).closest(".item-wrapper").find(".productName").val(valArr[0]);
$(this).closest(".item-wrapper").find(".sellPrice").val(valArr[1]);
$(this).closest(".item-wrapper").find(".amount").val(valArr[2]);
});
// =====
// Simulating the firebase database request
// Let assume some data to make this example working
let snapshot = [
{
product_name: "First Product",
selling_price: 10.57,
product_quantity: 42
},
{
product_name: "Second Product",
selling_price: 28.72,
product_quantity: 17
},
{
product_name: "Third Product",
selling_price: 11.48,
product_quantity: 8
}
];
/*
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 selling_price = childSnapshot.child("selling_price").val();
var amount = childSnapshot.child("product_quantity").val();
{#console.log(amount)#}
var total = product_name + " | " + selling_price + " | " + amount;
console.log(total);
$(".item-wrapper-" + div_title).find(".product_option").append('<option>'
+ total + '</option');
});
*/
// Here, I am simulating the option appending from the simulated snapshot array above
// Notice I append it to the template!
snapshot.forEach(function (item, index) {
// Format the text of the option
let optionText =
item.product_name +
" | " +
item.selling_price +
" | " +
item.product_quantity;
// Create the option and append
let option = $("<option>").text(optionText);
$(".item-wrapper_template").find(".product_option").append(option);
});
/*
})
}
else{
window.location.href="{% url 'login' %}";
}
});
*/
});
.item-wrapper_template{
display: none;
}
.subTotalDiv{
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<div class="productDiv"></div>
<!-- That is a TEMPLATE -->
<div class=item-wrapper_template>
<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>পণ্যের বিবরণ (Product Description) #</strong></span><span class="number">0</span>
</div>
<div class="row mt-1 text-center">
<select class="product_option form-control">
<option disabled selected> -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য | অ্যাভেলেবল আছে) -- </option>
<option disabled> -- Choose Product (Product Name | Sale Price | Available) -- </option>
</select>
</div>
<div class="row mt-3">
<label class="labels" style="font-size: 16px">পণ্যের নাম (Product name)</label> <input type="text" class="form-control productName">
</div>
<div class="row mt-3">
<label class="labels" style="font-size: 16px">বিক্রয় মূল্য (Sale price)</label> <input type="number" class="form-control sellPrice">
</div>
<div class="row mt-3">
<label class="labels" style="font-size: 16px">পণ্য মজুদ আছে (There are stockpiles of products)</label> <input type="text" class="form-control amount">
</div>
<div class="row mt-3">
<label class="labels" style="font-size: 16px">পরিমাণ (Amount)</label> <input type="number" class="form-control quantity_pro quantity">
</div>
<div class="mt-3 d-flex flex-column align-items-center text-center"> <button class="btn btn-danger deleteItem" type="button">মুছুন (Delete)</button> </div>
</div>
</div>
</div>
</div>
<!-- That is your "normal" HTML -->
<div class="mt-3 text-center">
<button id="btnAddtoList" class="btn profile-button" type="button">পণ্য যোগ করুন (Add products)</button>
</div>
<div class="mt-3 text-center">
<button id="subTotal" class="btn profile-button" type="button">সাব টোটাল (Sub Total)</button>
</div>
<!-- That is hidden by CSS but shown by JS -->
<div class="subTotalDiv">
<div class="container rounded bg-white mt-3 mb-3">
<div class="row">
<div class="col-md-12">
<div class="row mt-3">
<span class="col-md-12">সাব টোটালঃ (Sub Total:)</strong></span><span class="subTotalAmount">0</span>
</div>
<div class="row mt-3">
<label class="labels" style="font-size: 16px">ডিসকাউন্ট(%) (Discount (%))</label><input type="text" class="form-control">
</div>
<div class="row mt-3">
<label class="labels" style="font-size: 16px">ভ্যাট(%) (VAT (%))</label><input type="text" class="form-control sellPrice">
</div>
<div class="row mt-3">
<span class="col-md-12"><strong>মোটঃ (Total:)</strong></span>
</div>
<div class="mt-3 d-flex flex-column align-items-center text- center"> <button class="btn btn-info" type="button">মোট (Total)</button></div>
</div>
</div>
</div>
</div>
CodePen

why doesnt event.preventDefault() work on html elements that are loaded in with jquery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
This is my HTML form:
<form class="access_form" action="/elements/login.php" method="POST">
<div class="logo">
<img src="/img/brand/logo.png" alt="logo" class="brand">
</div>
<div class="form">
<div class="input_container">
<input type="text" placeholder="Username" name="username" required>
<input type="password" placeholder="Password" name="password" required>
<button type="submit" name="login" id="submit">Login</button>
<p id="alert"></p>
<h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>
</div>
<div class="small_container">
<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form('sign_up');">Sign up</a></h5>
</div>
</div>
</form>
This is my javascript:
// form switching function to login or signup form
function switch_form(type) {
if (type == "login") {
$( 'form.access_form' ).replaceWith(login);
} else if (type == "sign_up") {
$( 'form.access_form' ).replaceWith(sign_up);
}
return false;
}
$( document ).ready(function() {
$(".access_form").submit(function(event){
event.preventDefault();
});
});
// sign up form
var sign_up = '<form class="access_form" action="/elements/signup.php" method="POST">' +
'<div class="logo">' +
'<img src="/img/brand/logo.png" alt="logo" class="brand">' +
'</div>' +
'<div class="form">' +
'<div class="input_container">' +
'<input type="text" placeholder="Full name" name="fullname">' +
'<input type="text" placeholder="Email" name="email" id="user_email">' +
'<input type="text" placeholder="Username" name="username" id="user_uid">' +
'<input type="password" placeholder="Password" name="password" id="user_pswd">' +
'<button type="submit" name="sign_up" id="submit">Sign Up</button>' +
'<p class="alert"></p>' +
'</div>' +
'<div class="small_container">' +
'<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("login");">Login</a></h5>' +
'</div>' +
'</div>' +
'</form>';
// login form
var login = '<form class="access_form" action="/elements/login.php" method="POST" id="login">' +
'<div class="logo">' +
'<img src="/img/brand/logo.png" alt="logo" class="brand">' +
'</div>' +
'<div class="form">' +
'<div class="input_container">' +
'<input type="text" placeholder="Username" name="username" required>' +
'<input type="password" placeholder="Password" name="password" required>' +
'<button type="submit" name="login">Login</button>' +
'<p class="alert"></p>' +
'<h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>' +
'</div>' +
'<div class="small_container">' +
'<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("sign_up");">Sign up</a></h5>' +
'</div>' +
'</div>' +
'</form>';
So from my previous question i've found out that preventdefault works on the normally loaded html elements when the page starts however if you look at the javascript im loading in a signup form without reloading the page using jquery. I think that's why the preventdefault is not working on the html elements that are loaded on the page.
any suggestions for how i could go about this?

Basically Jquery attaches event handlers to elements only once, when the page is first loaded. Any elements that are created dynamically (don't exist when the page first loads), will need to have the event handlers manually added to them or you can attach the event handler to an element higher in the DOM that existed from page load. In your example you can attach the event handler to the document, which exists the entire time, and tell it to look for submit events from .access_form elements.
The answer on this page explains it a little better.
Click event doesn't work on dynamically generated elements
$( document ).on('submit','.access_form', function(event){
event.preventDefault();
});

jQuery Remove Attribute Does Not Work

Let's say I have div like this on my page:
<div style="padding-top:10px;" id="message2">
<p>More Links: <span class="fa fa-plus add"></span></p>
<div class="appending_div">
<div class="blog_links">
<p class="blog_linku_1">
Link URL 1: <input type="text" name="blog_linku_1[]"> Link Name 1: <input type="text" name="blog_linkn_1[]">
</p>
</div>
</div>
</div>
So simply if user click on + sign, it will add another input field just like this one with this script:
$(document).ready(function() {
var i = 2;
$('.add').on('click', function() {
var field = '<p class="link'+i+'">Link URL '+i+': <input type="text" name="blog_linku_'+i+'[]"> Link Name '+i+': <input type="text" name="blog_linkn_'+i+'[]"> <span class="glyphicon glyphicon-minus minus" id="minus'+i+'"></span></p>';
$('.appending_div').append(field);
i = i+1;
})
$('#minus'+i+'').click(function(){
$(".link"+i+"").remove();
});
})
And if you mention out, the extra links contains a remove symbol which is a - sign, and by clicking this sign, the paragraph which has the class link"+i+" should be removed.
And now the problem is that the remove icon does not work when you click on it. And the Console bar does not show any error message.
So what is your idea about this, how can I solve this problem?

First, it will be better to attach the event to a common class instead of using incremented values
Example :
var i = 2;
$('.add').on('click', function() {
var field = '<p class="link">Link URL ' + i + ': <input type="text" name="blog_linku[]"> Link Name ' + i + ': <input type="text" name="blog_linkn[]"> <span class="glyphicon glyphicon-minus minus">----</span></p>';
$('.appending_div').append(field);
i++;
});
NOTE: Since you're using input names as array [] you don't have to generate them with indexes.
You need to use the event delegation .on() when you attach the click event to .minus since the elements are generated dynamically :
$('body').on('click','.minus', function() {
$(this).closest('p').remove();
});
$(document).ready(function() {
var i = 2;
$('.add').on('click', function() {
var field = '<p class="link">Link URL ' + i + ': <input type="text" name="blog_linku[]"> Link Name ' + i + ': <input type="text" name="blog_linkn[]"> <span class="glyphicon glyphicon-minus minus">DELETE</span></p>';
$('.appending_div').append(field);
i++;
});
$('body').on('click', '.minus', function() {
$(this).closest('p').remove();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:10px;" id="message2">
<p>More Links: <span class="fa fa-plus add"></span></p>
<div class="appending_div">
<div class="blog_links">
<p class="blog_linku_1">
Link URL 1: <input type="text" name="blog_linku_1[]"> Link Name 1: <input type="text" name="blog_linkn_1[]">
</p>
</div>
</div>
</div>
<br>
<button class="add" type="button">Add</button>

I've restructured your code a bit. See below:
$(document).ready(function() {
var i = 2;
$('.add').on('click', function() {
$('<p class="link' + i + '">Link URL ' + i + ': <input type="text" name="blog_linku_[]" /> Link Name' + i + ': <input type="text" name="blog_linkn_[]"> <span class="fa fa-minus minus"></span></p>')
.appendTo('.appending_div');
i = i + 1;
});
$('.appending_div').on('click.remove', '.minus', function () {
$(this).parent()
.remove();
});
})
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:10px;" id="message2">
<p>More Links: <span class="fa fa-plus add"></span></p>
<div class="appending_div">
<div class="blog_links">
<p class="blog_linku_1">
Link URL 1: <input type="text" name="blog_linku_1[]"> Link Name 1: <input type="text" name="blog_linkn_1[]">
</p>
</div>
</div>
</div>
I've simplified the top portion of your code that adds the element to the screen. Since you are using jQuery you can combine a few of these steps with the chaining of their library functions.
For the event handling, because the elements are added dynamically, you need to delegate the events to the new elements. Recall that elements must be present on the page for the event to be bound. Otherwise, the events must be delegated to an existing element. jQuery will handle the abstractions and the "bubbling" of the events to the parent element.

You are adding the #minus element on $(".add") click, so when the DOM loads it cannot find the $("#minus"). You have to add the $("#minus") click function inside the $(".add") click.
Try the below code
$(document).ready(function() {
var i = 2;
$('.add').on('click', function() {
var field = '<p class="link'+i+'">Link URL '+i+': <input type="text" name="blog_linku_'+i+'[]"> Link Name '+i+': <input type="text" name="blog_linkn_'+i+'[]"> <span class="glyphicon glyphicon-minus minus" id="minus'+i+'"></span></p>';
$('.appending_div').append(field);
i = i+1;
$('#minus'+i+'').click(function(){
$(".link"+i+"").remove();
});
});
});

Dynamic textboxes are not removing

I am adding textboxes through jquery and for one text box it is removing perfeclty but when I add two textboxes then it does now remove both.
this is jquery
<script>
$(document).ready(function($){
$('.product-form .add-product').click(function(){
var n = $('.text-product').length + 1;
var product_html = $('<p class="text-product"><label for="product' + n + '">Name <span class="product-number">' + n + '</span></label> <input required type="text" name="productnames[]" value="" id="product' + n + '" /> <label for="productprice' + n + '">Price <span class="product-number">' + n + '</span></label> <input required type="text" name="productprices[]" value="" id="productprice' + n + '" />Remove</p>');
product_html.hide();
$('.product-form p.text-product:last').after(product_html);
product_html.fadeIn('slow');
return false;
});
$('.product-form').on('click', '.remove-category', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.product-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
and this is my html
<div>
<form>
<div class="product-form">
<p class="text-product">
<label for="product1">Name <span class="product-number">1</span></label>
<input required type="text" name="productnames[]" value="" id="product1" />
<label for="product1">Price <span class="product-number">1</span></label>
<input required type="text" name="productprices[]" value="" id="product1" />
<div>
<a class="add-product" href="#">Add More</a>
</div>
</p>
</div>
<div>
<input type="submit" name="submitDetails" value="Finish"/>
</div>
</form>
</div>
If only one textbox for instance productnames is added then it removal function works but when I add botch productnames and productprices textbox removal function does not remove both

Your code should read $('.product-form').on('click', '.remove-product', function() rather than 'click', '.remove-category'. Also, don't place the Add More div element inside the paragraph element. The numbering also breaks a bit, but you can figure that out.

Jquery add fields dynamically, if removed last element the fields are not added anymore

i have a conflict with jquery and can not find a correct solution, every time something breaks, i have a form that i add one input and one select at the time dynamically, by default the html form have on input and one select, and after adding new fields if is required.
The problem is that the fields are added dinamically with jquery and can be removed as well, but if you add a few new fields and remove just the last one the form will not be working anymore, can not be added new fields, but if you remove a field from the middle than it is fine is working.
I need to fix if you remove even the last element to be abble to add again new fields.
Please see the example below.
HTML
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<span class="multiple-field-container-add">
<span class="content-panel-flat-raw-double-sub">
<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">
<label>IBAN</label>
<input class="form-control" id="0-iban" name="0-iban" type="text" value="">
</span>
<span class="content-panel-flat-raw-double-sub-raw">
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<label>Currency</label>
<select class="select select2-hidden-accessible" id="0-currency" name="0-currency" tabindex="-1" aria-hidden="true"><option value="-">Select currency</option><option value="USD">USD</option><option value="EUR">EUR</option></select>
</span>
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<b><i class="icon-plus2"></i></b> Add new
</span>
</span>
</span>
</span>
</form>
Jquery
var next = 1;
$(".multiple-add-input").click(function(e){
e.preventDefault();
var addto = "#" + next + "-iban";
next = next + 1;
var newIn = '<span class="content-panel-flat-raw-double-sub">'+
'<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">'+
'<label>IBAN</label>'+
'<input class="form-control" id="' + (next) + '-iban" name="' + (next) + '-iban" type="text" value="">'+
'<div class="form-control-feedback">'+
'<i class="icon-font-size"></i>'+
'</div>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw">'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<label>Currency</label>'+
'<select name="' + (next) + '-currency" id="' + (next) + '-currency" class="select">'+
'<option value="EUR">EUR</option>'+
'<option value="USD">USD</option>'+
'</select>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<div class="btn bg-teal-400 btn-labeled btn-custom-width remove-me" onclick="_multiple_field_remove_('+ (next) +')"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
'</span>'+
'</span>'+
'</span>';
alert(next);
var newInput = $(newIn);
$(addto).parent().parent().after(newInput);
$('.select').select2();
_multiple_field_remove_ = function(id){
alert(id);
$('#'+ id +'-iban').parents('span.content-panel-flat-raw-double-sub').remove();
};

ionluchian
the reason cause the issue,it's the number next.
when you delete the last element, and you click add button next,
var addto = "#" + next + "-iban";
...
// can't find item 'addto',so it's not work
$(addto).parent().parent().after(newInput);
this code can't find the last items at all.
Please use above instead:
change: $(addto).parent().parent().after(newInput);
to : $('.multiple-field-container-add').append(newInput)

This is not the best looking end result, but its working
$(function(){
addElement();
});
function addElement(){
$(".multiple-add-input").on('click', function(e){
e.preventDefault();
$(this).off('click');
var next = parseInt($('.iban-input').last().attr('id'));
var addto = "#" + next + "-iban";
next++;
var newIn = '<span class="content-panel-flat-raw-double-sub">'+
'<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">'+
'<label>IBAN</label>'+
'<input class="form-control iban-input" id="' + (next) + '-iban" name="' + (next) + '-iban" type="text" value="">'+
'<div class="form-control-feedback">'+
'<i class="icon-font-size"></i>'+
'</div>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw">'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<label>Currency</label>'+
'<select name="' + (next) + '-currency" id="' + (next) + '-currency" class="select">'+
'<option value="EUR">EUR</option>'+
'<option value="USD">USD</option>'+
'</select>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<div class="btn bg-teal-400 btn-labeled btn-custom-width remove-me" id="remove-'+ (next) +'"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
'</span>'+
'</span>'+
'</span>';
// Add element
$(addto).parent().parent().after(newIn);
// Bind removing
$('.remove-me')
.off('click')
.on('click', function(){
removeElement($(this).attr('id'));
});
// Bind adding
addElement();
});
}
function removeElement(id){
$('#'+id).parent().parent().parent().remove();
}
.content-panel-flat-raw-double-sub{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<span class="multiple-field-container-add">
<span class="content-panel-flat-raw-double-sub">
<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">
<label>IBAN</label>
<input class="form-control iban-input" id="0-iban" name="0-iban" type="text" value="">
</span>
<span class="content-panel-flat-raw-double-sub-raw">
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<label>Currency</label>
<select class="select select2-hidden-accessible" id="0-currency" name="0-currency" tabindex="-1" aria-hidden="true"><option value="-">Select currency</option><option value="USD">USD</option><option value="EUR">EUR</option></select>
</span>
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<b><i class="icon-plus2"></i></b> Add new
</span>
</span>
</span>
</span>
</form>