We Keep Coding

How can multiple computations when I automatically add other fields, then save all the data?

I'm trying to make calculations on multiple fields having different data but when i add them calculations are only done on the first set of fields but the other fields i add, the javascript does not seem to work.
Plus i want to save those data in an array.
Here's my HTML code to display the select box and the input fields
<div id="addon_details">
<div class="form-group col-md-6">
<label for="name">Select Addon Package</label>
<select id="addon" name="type[]" class="form-control">
<option value="Radio">Radio</option>
<option value="Lamp">Lamp</option>
<option value="Phone">Phone</option>
<option value="Battery">Battery</option>
<option value="Antenna">Antenna</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="name">Quantity</label>
<input type="number" class="form-control" name="quantity[]" placeholder="Qty" id="qty[]" onchange="calculate();">
</div>
<div class="form-group col-md-4">
<label for="name">Total Price</label>
<input type="number" class="form-control" name="total[]" placeholder="" readonly="" id="price">
</div>
</div>
Then when I click on add package button it adds another set of fields
<div class="form-group col-md-12 col-md-offset-2">
<button type="button" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-plus" aria-hidden="true" id="add_success"></i>Add Package</button>
<button type="submit" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-refresh" aria-hidden="true"></i>Upgrade</button>
<button type="button" class="btn btn-default btn-addon m-b-sm"><i class="fa fa-close" aria-hidden="true"></i>Cancel</button>
</div>
Also here's the javascript to compute:
function calculate(){
var qty = document.getElementById('qty[]').value;
var radio = 1000 ;
var price = "";
if(document.getElementById('addon').value == "Radio") {
price = parseInt(qty) * radio;
document.getElementById('price').value = price;
}
}
But unfortunately for me, I can only do calculation on the first set of fields but the other fields the calculation are not possible.
Below you can see what I'm trying to do graphically
Any help is appreciated. Thank you!

As #Barmar suggests, you need to make your ID's unique. In your example your initial addon id could be addon1 like this:
<select id="addon1" name="type[]" class="form-control">...</select>
As you use your add package button, you would have to generate the next number for the select, like:
<select id="addon2" name="type[]" class="form-control">...</select>
<select id="addon3" name="type[]" class="form-control">...</select>
etc...
You could then have your function traverse all the fields with partial matches on addon id. This SO link would help you understand how you might do that.

How to hide Calendar after picking month in jQuery or javascript?

I have the below code, how can I hide the calendar when I pick the month?
<div class="col-lg-3 col-sm-3" id="div_monthly_cal" style="display:none;">
<div data-date-minviewmode="months" data-date-viewmode="months" data-date-format="mm-yyyy" data-date="" class="input-append date dpMonths" id="dtpk2">
<input name="month_pick" id="month_pick" type="text" value="<?php echo date('m-Y'); ?>" class="form-control" readonly="readonly" />
<span class="input-group-btn add-on">
<button class="btn btn-primary" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>

If you are using jquery calendar, than you can use below code :-
$('#example1').datepicker().on('changeDate', function (ev) {
$('#example1').Close();
});
Update 1:
You can also use the autoclose option, shown below :-
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
});
Update 2: Another option
$('#dp1').datepicker()
.on('changeDate', function(ev){
$('#dp1').datepicker('hide');
});

jQuery modify element children

My Bootstrap list has on each item a "add" button. After click on add, I modify the item and add it to another list-group.
But if I modify the button-element nothing happens. I dont know why, I tried out a lot of methods, but nothing works.
This is the default item:
<div class="list-group-item" data-id="399">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width:100%">Item-Name</span>
<div class="input-group-btn">
<button type="button" class="btn btn-success item-add">+</button>
</div>
</div>
</div>
This is what I want:
<div class="list-group-item" data-id="399">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width:100%">Item-Name</span>
<input class="form-control" placeholder=" Suchbegriffe" value="" style="min-width:150px;" type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-success item-remove">x</button>
</div>
</div>
</div>
The ".item-add" jQ function:
var elem = $(this).parent().parent();
$(elem).children(':eq(last)').removeClass('btn-success').addClass('btn-danger');
$(elem).children(':eq(0)').after('<input type="text" class="form-control" placeholder=" Suchbegriffe" value="' + $('#parameters').val() + '" style="min-width:150px;">');
$(elem).children(':eq(0)').html($(elem).children(':eq(0)').html().substr(0, 15) + '...');
elem = $(elem).parent();
$('#item-list-search').append(elem);
If I use console.log($(elem).children(':eq(last)')); it display the <button> element, but nothing change.

It should be more like this:
$(elem).children(':eq('+last+')').removeClass('btn-success').addClass('btn-danger');
Instead of this:
$(elem).children(':eq(last)').removeClass('btn-success').addClass('btn-danger');
Because you have to concatinate it, to make it look like a string. Since last is javasccript. So now it the button will actually change.

I did a JsFiddle for you, see here https://jsfiddle.net/tnya6b1e/
With this js :
$('.item-add').click(function() {
if (!($('#newitem').length > 0)) {
$('.item-add').parents('.input-group-btn').prepend('<input id="newitem" type="text" class="form-control" placeholder=" Suchbegriffe" value="' + $('#parameters').val() + '" style="min-width:150px;">');
$(this).removeClass('btn-success').addClass('btn-danger');
}
});

$(elem).children(':eq('+last+')').removeClass('btn-success').addClass('btn-danger');
last is the JavaScript variable.So,it should be concate it with string

jQuery getting previous input value

<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
</span>
</div>
</div>
I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.

Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:
$('#btn-chat').click(function() {
var inputVal = $('#btn-input').val();
// do something with the value here...
});
If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():
$('#btn-chat').click(function() {
var inputVal = $(this).closest('.input-group').find('input').val();
// do something with the value here...
});
If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.

$("#btn-chat").click(function(){
var input_values = $(this).parent().parent().find("input").val();
alert(input_values);
});

As #RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
//OR $(this).parent().prev().val();
console.log( val );
});
});
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
console.log( val );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>

Need increment/decrement input fields name by clicking div- jQuery

I am novice in jQuery but trying to learn something very basic. I am just trying to build up auto increment/decrement input fields name inside a 'div' when CLICK add/remove button. Here is my HTML:
<div class="add_new_agent" style="display:none;">
<div class="col-xs-12" id="add_agent_div">
<span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>
<label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small></label>
<div class="row">
<div class="col-xs-6">
<input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
</div>
<div class="col-xs-6">
<input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
</div>
</div>
<input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">
</div>
<button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>
</div>
Here i am trying to build when click #add_agent then new #add_agent_div will appear and the fields name will increase and decrease fields names when click #agent-remove as well.
So far, i managed to add/remove new #add_agent_div but i cant increase/decrease the input fields name's last digit :(
Here is my jQuery code:
$('#add_agent').click(function(e){
var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
$('.add_new_agent').find('#add_agent_div').after(cloneDiv);
});
$('#agent-remove').click(function() {
if (confirm('continue delete?')) {
$(this).parent('#add_agent_div').remove();
}
});

First of all, since you are cloning and appending the html elements, you should not use ids, since ids can not appear multiple times in a page. Instead you should use classes.
For your solution, you can do this:
$('#add_agent').click(function(e){
var $htmlTemplate = $('.add_new_agent').find('.add_agent_div:first').clone(true);
$htmlTemplate.find('.count_agent').text($('.add_new_agent').find('.add_agent_div').length+1);
$('.add_new_agent').append($htmlTemplate);
});
$('#agent-remove').click(function() {
if (confirm('continue delete?')) {
$(this).parent('.add_agent_div').remove();
$('.add_new_agent').find('.add_agent_div').each(function(e,i){
$(this).find('.count_agent').text($(this).index()+1);
});
}
});
Here is working demo:
http://jsfiddle.net/fk82uro5/3/

You could do something like this
$('#add_agent').click(function(e){
var currentNumber = /* parse this off the dom or keep track of the current number in your script */
var newDiv = '<div class="row">' +
'<div class="col-xs-6">' +
'<input type="text" placeholder="Agent Name" name="agent_name_' + currentNumber + '" class="string ..."' +
...;
$("#add_agent_div").append(newDiv);
})
$("#agent-remove").click(function() {
/* remove last div in add agent div */
})

You can go for something like this: http://jsfiddle.net/zo1r1s4f/1
HTML
<div class="add_new_agent">
<div class="col-xs-12" id="add_agent_div"> <span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>
<label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small>
</label>
<div class="row">
<div class="col-xs-6">
<input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
</div>
<div class="col-xs-6">
<input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
</div>
</div>
<input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">
<button class="agent_remove" type="button" class="btn">Remove</button>
</div>
<button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>
jQuery
$('#add_agent').click(function (e) {
var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
$('.add_new_agent').find('#add_agent_div').after(cloneDiv);
});
$('.agent_remove').click(function () {
$(this).parent().remove();
});