Develop Reference

Name of the field increment issues which is dynamically generating

I am using Codeigniter but my issue is not related to Codeigniter. I am getting some issues in my jQuery.
On page load, I am displaying the Add more button so when the user clicks on Add more then it will display the dropdown dynamically. (Note: The second dropdown will display from ajax success. So now I am displaying only text for understanding).
Below are the two dropdowns.
Now if you choose from the dropdown then it will display dynamically input field some think like this
The user can add more one the dropdown field only clicking on Add more.
check below image
Now my main issue is, I increment the name of the input field but not getting increment value. I am getting the below output
For example
First dropdown
<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">
Second dropdown
<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">
Notice here every time i am getting name="pp_fileStatus2" for every dropdown and name="reasonDate2" for every input field.
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
var count = 2;
var numberIncr = 1; // used to increment the name for the inputs
var addrm = '';
$.ajax({
type: "POST",
async: false,
url: "/access_control/getRMname",
//data: {},
dataType: 'json',
success: function(response) {
addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
$.each(response, function(key, data) {
addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
//rm_details.push(addrm);
});
addrm += '</select>';
}
});
//Once add button is clicked
$(document).on('click', '#clicktoadd', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
}
count++;
});
$(document).on('change', '.pp_fileStatus', function(event) {
if (($(this).val() == '1') || ($(this).val() == '3')) {
$(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '" class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '" class="form-control" placeholder="Remark">');
} else {
$(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '" class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
}
});
numberIncr++;
});
<div id="clicktoadd">Add More</div>
<div class="row">
<div class="medication_info">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

You need to increment value inside the .click callback since you are generating form name inside the .click event.
Increment numberIncr when you trigger a click. Also remove numberIncr++ at the end script.
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
var count = 2;
var numberIncr = 1; // used to increment the name for the inputs
var addrm = '';
$.ajax({
type: "POST",
async: false,
url: "/access_control/getRMname",
//data: {},
dataType: 'json',
success: function(response) {
addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
$.each(response, function(key, data) {
addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
//rm_details.push(addrm);
});
addrm += '</select>';
}
});
//Once add button is clicked
$(document).on('click', '#clicktoadd', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
// CHECK: Added this to increment number on click
numberIncr++;
$(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
}
count++;
});
$(document).on('change', '.pp_fileStatus', function(event) {
if (($(this).val() == '1') || ($(this).val() == '3')) {
$(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '" class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '" class="form-control" placeholder="Remark">');
} else {
$(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '" class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
}
});
// CHECK: remove the below numberIncr logic
// numberIncr++; --> remove this
});
<div id="clicktoadd">Add More</div>
<div class="row">
<div class="medication_info">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

How to calculate sum of multiple dynamic input fields in Javascript?

I'm trying to calculate sum of multiple dynamic input fields via javascript.
This is my main input:
<input type="text" name="price[]" id="price" value="" class="form-control" />
This is how I'm adding inputs:
$('.btn-add-srvice').on('click', function(e){
e.preventDefault();
var template = '<input type="text" name="price[]" id="price" class="form-control" />';
$(this).before(template);
});
After this, I have a custom function which calculate data from inputs:
function sum() {
var price = document.getElementById('price').value;
var subtotal;
}
It is calculating only one input(not the added inputs). Now, I want to calculate sum of the price of each inputs value that are showing after creating with above function.
Expected result:
input1 = 30
input2 = 30
...... = ...
subtotal = ...
So, the subtotal variable should be filled with sum of for each inputs.
Thank you.
Updated
Now, how could I calculate sum of each row and also subtotal. Below the functions you can find the expected result image link.
My full javascript function:
$(document).on('keyup keydown change', ".price, .months, #mwst, #rabatt",function () {
var months = document.getElementById('months').value;
var mwst = document.getElementById('mwst').value;
var rabatt = document.getElementById('rabatt').value;
var priceSum = 0;
var monthsSum = 0;
$('.price').each(function(){
priceSum += parseFloat(this.value);
});
$('.months').each(function(){
monthsSum += parseFloat(this.value);
});
var subtotal = priceSum * monthsSum;
var sum = priceSum * months;
var mwstValue = subtotal + 7.7 / 100 * subtotal - subtotal;
document.getElementById('subtotal').value = subtotal.toFixed(2);
document.getElementById('sum').value = subtotal.toFixed(2);
document.getElementById('mwst').value = mwstValue.toFixed(2);
var percentage = (mwst / 100) * subtotal;
var result = subtotal + mwstValue - parseFloat(rabatt);
document.getElementById('total').value = result;
});
My full dynamic inserted inputs:
$('.btn-add-srvice').on('click', function(e){
e.preventDefault();
var template =
'<div class="col-md-12" style="padding:0">'+
'<div class="col-md-6" style="padding-left:0px">'+
'<div class="form-group">'+
'<select style="width: 100%" id="service_id" name="service_id[]" class="service_id ">'+
'#foreach($servicesList as $sli)'+
'<option value="{{$sli->id}}">{{$sli->name}}</option>'+
'#endforeach'+
'</select>'+
'</div>'+
'</div>'+
'<div class="col-md-3" style="padding-right:0px">'+
'<div class="form-group">'+
'<input type="text" name="price[]" id="price" value="" class="form-control price" />'+
'</div>'+
'</div>'+
'<div class="col-md-1" style="padding-right:0px">'+
'<div class="form-group">'+
'<input type="text" name="months[]" id="months" value="" class="form-control months" />'+
'</div>'+
'</div>'+
'<div class="col-md-2" style="padding-right:0px">'+
'<div class="form-group">'+
'<input type="text" name="sum[]" id="sum" value="" class="form-control sum" />'+
'</div>'+
'</div>'+
'<div>'+
/*'<button type="button" class="btn btn-default btn-xs remove">Remove</button>'+*/
'</div>'+
'</div>';
enter code here
$(this).before(template);
});
Here is the link how is looking now and the expected result:
https://ibb.co/sVv3qGF

You are giving same id to multiple elements. Give class instead. Then get their sum.
var sum = 0;
$('.price').each(function(){
sum += parseFloat(this.value);
});

Try like this. use class in HTML elements and in jquery try to loop and get the value and sum it.
$('.btn-add-srvice').on('click', function(e){
e.preventDefault();
var template = '<input type="text" name="price[]" id="price" class="form-control price" />';
$(this).before(template);
});
$(document).on('keyup', ".price",function () {
var total = 0;
$('.price').each(function(){
total += parseFloat($(this).val());
})
console.log(total)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="price[]" id="price" value="" class="form-control price" />
<input type ="button" value="add" class="btn-add-srvice"/>

First, your template string for adding inputs is wrong, an ID is, as the name implies, a unique identifier and can only be used once on a page. You don't need id so remove it from the template
var template = '<input type="text" name="price[]" class="form-control" />':
Now just update the input sum function:
function sum() {
var priceElements = document.querySelectorAll('[name^=price]');
var sum = 0;
priceElements.forEach(function(element) {
sum = sum + element.value;
});
console.log(sum);
}

At the time of adding dynamic input field, you should give unique id
for each field.
Then Maintain the list of unique ids.
Iterate on that list and calculate the sum.

let subtotal;
const summOfValues = (summ, element) => summ + Number(element.value);
$('.btn-add-srvice').on('input', function(){
subtotal = $('[name="price[]"]',this).toArray().reduce(summOfValues);
$('other').val(subtotal);
})

Give each input a common class. Give, the below give code a try.
function doSum() {
var x_names = document.getElementsByClassName("x_name")
for(var i = 0; i < x_names.length; i++) {
alert(x_names[i].value)
// You can do sum of values here
}
}
<input type="text" class="some_name" name="price[]" id="price" value="">
<input type="text" class="some_name" name="somethingElse" id="somethingElse" value="">

Removing dynamically created divs with jquery

EDIT: Just so I asks questions better next time. I got a -1 what did I do wrong?
I'm adding quite a lot of html dynamically and want to be able to remove them also one by one.
Below the JQuery. I want to be able to remove the whole $("#row1' + (counter) + '") div including all divs in it by clicking the remove button under it.
Here's a fiddle: http://jsfiddle.net/FullContCoder/Sf9r5/1/
Thanks a lot in advance!
$(document).ready(function() {
var counter = 0;
$(".addButton").click(function() {
var test = $( '<div id="row1' + (counter) + '" class="row"><div class="col-md-2"><p><small>Placement Name:</small></p><input id="inputPlacement' + (counter) + '" type="text" class="form-control input-sm" name="placementName" placeholder="ex: Homepage">' +
'</div><div class="col-md-3"><p><small>URL:</small></p><input id="inputURL" type="url" class="form-control input-sm" name="url" placeholder="ex: http://www.allure.com"></div>' +
'<div class="col-md-2"><div class="row"><div class="col-md-12"><p><small>Select a Date and Time:</small></p></div></div><div class="row"><div class="col-md-12">' +
'<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" readonly=""><span class="add-on"><i class="icon-calendar"></i>' +
'</span></div></div></div><div class="row"><div class="input-append bootstrap-timepicker"><input id="timepicker1" type="text" class="input-small"><span class="add-on">' +
'<i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-md-2"><p><small>Recurring:</small></p><select id="recurring" class="form-control input-sm">' +
'<option name="daily" value="daily">Daily</option><option name="weekly" value="weekly">Weekly</option><option name="month" value="month">Month</option></select></div>' +
'<div class="col-md-2"><p><small>Day of Week:</small></p><div class="row"><div class="col-md-6"><label class="checkbox-inline"><input id="mon" name="test" type="checkbox" value="1"> Mon</label>' +
'</div><div class="col-md-6"><label class="checkbox-inline"><input id="fri" name="test" type="checkbox" value="1"> Fri</label></div></div><div class="row"><div class="col-md-6">' +
'<label class="checkbox-inline"><input id="tue" name="test" type="checkbox" value="1"> Tue</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sat" name="test" type="checkbox" value="1"> Sat</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="wen" name="test" type="checkbox" value="1"> Wed</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sun" name="test" type="checkbox" value="1"> Sun</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="thu" name="test" type="checkbox" value="1"> Thu</label></div></div></div><div class="col-md-1"><p><small>Remove:</small></p>' +
'<button type="button" class="removeButton btn btn-default btn-sm"><span class="glyphicon glyphicon-minus-sign"></span></button></div></div>' )
$('.removeButton').click(function() {
$("#row1' + (counter) + '").remove();
});
counter++;
$("#row1").after(test);
});
});

You should use event delegation to add events to dynamically created elements. And use .closest() to get the first element that matches the selector. Try this:
$(document).on('click','.removeButton',function() {
$(this).closest("div.row").remove();
});
You need to move your remove button click handler outside of add button click handler.
DEMO

You can try it.
$(document).on('click', '.removeButton', function(){
$('#row1' + counter).remove();
});

1) You need to use event delegation here to bind click event to your button since it has been added dynamically to the DOM.
2) Use .closest() to remove the closest matching ancestor .row and remove redundant counter variable here:
3) You also need to move your click handler of remove button outside of the click handler of the add button.
Final code should look something like this:
$(document).ready(function () {
$(".addButton").click(function () {
var test = .....
$("#row1").after(test);
});
$('.removeButton').click(function () {
$(this).closest(".row").remove();
});
});
Updated Fiddle

Loosing margin with javascript jquery

Why when I add the same html code with javascript jquery I loose margin ?
Try this jsfiddle and you will understand me.
jQuery
function addphone() {
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label>' +
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');
}
HTML
<div id="phonedetails">
<div>
<label>phone :</label>
<input type="text" />
<input type="button" onclick="addphone();"/>
</div>
</div>

It isn't a margin, it is a space (i.e. what you get when you press the space bar) between the label and the input. It is missing in the code generated from JS.
Change:
'<label>phone :</label>' +
To:
'<label>phone :</label> ' +
// ^ space here

You aren't losing margins, you're losing whitespace:
http://jsfiddle.net/3md9S/2/
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label> ' + // SINGLE SPACE ADDED HERE
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');

That is just a white space in your html.
Also you don't have to write html again to append , you can clone it -
$( "#phonedetails" ).append($('#phonedetails div').eq(0).clone());
Demo --> http://jsfiddle.net/3md9S/7/

How do I create simple auto code generator?

I'm trying to create a simple form where people input in some values and on submit auto generates the code below the form. Which then they can copy to use.
i.e.
Input 1 width(px) - 200
Input 2 height(px) - 300
Input 3 content - Hello world
Submit button
[code to copy]
[div width="200px" height="300px"]Hello world[/div]
[/code to copy]

This can be done in real time, no need to submit.
Here: http://jsfiddle.net/NzFeb/
$("input").keyup(function() {
$("#result").text(
'<div width="' + $("#width").val() +
'px" height="' + $("#height").val() +
'px">' + $("#content").val() +
'</div>');
});
To simplify the code i used the library jQuery.
jQuery site
How to set up jQuery in your site

Try:
Width: <input id="width" type="text" /> <br/><br/>
Height: <input id="height" type="text" /> <br/><br/>
Content: <input id="content" type="text" /><br/><br/>
<button id="go">Go</button><br/><br/>
<textarea id="code" cols="30" rows="10" ></textarea>
document.getElementById("go").onclick = function() {
document.getElementById("code").innerHTML = "<div style='width:" + document.getElementById("width").value+ "; height:" + document.getElementById("height").value + ";'>" + document.getElementById("content").value + "</div>";
};
as seen here: http://jsfiddle.net/69q57/13/