We Keep Coding

How do I get total addition of three group?

Here I three groups with range slider and input. I want to apply two things.
Multiplication of range slider and the input.
And at the end Addition of all multiplication.
I have a different ID for all input types.
$(document).ready(function(){
var t_sum=0;
var rs=document.getElementById("range").value;
var am=document.getElementById("amount").value;
var k=0;
$('.mul').each(function(){
i++;
var newID='multiplication-'+k;
$(this).attr('id',newID);
document.getElementById("multiplication").innerHTML = rs * am;
})
document.getElementById("addition").innerHTML= multiplication+k;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<input type="text" id="amount1" value="10" disabled ><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" id="amount2" value="20" disabled ><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" id="amount3" value="30" disabled ><br>
<input type="hidden" id="multiplication" class="mul">
Addition of all multiplication <input type="text" id="addition" value="" disabled >
I know the code is wrong.

You can give common class to your amt input as well then use index value of each loop to get value of amt inputs and add total to your addition input.
Demo Code :
$(document).ready(function() {
$(".range").on("change", function() {
var mult = 0;
$('.range').each(function(i) {
var selector_next = parseInt($(".amt:eq(" + i + ")").val()) //get input value
mult += parseInt($(this).val()) * selector_next //multply..
console.log($(".amt:eq(" + i + ")").val(), $(this).val())
})
$("#multiplication").val(mult)
$("#addition").val(mult)
})
$(".range:first").trigger("change")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<!--added class-->
<input type="text" class="amt" id="amount1" value="10" disabled><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount2" value="20" disabled><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount3" value="30" disabled><br>
<input type="hidden" id="multiplication" class="mul"> Addition of all multiplication <input type="text" id="addition" value="addition" disabled>

How to get sum of input values selection by id (0 to n) using jquery?

I want to sum of input value selection by ids. id is incrementing by 1. I know it is very easy with class selector and each function. But I am searching for id.
<input type="number" value="10.0" class="numberinput form-control" id="id_inputformset-0-inputqty">
<input type="number" value="12.0" class="numberinput form-control" id="id_inputformset-1-inputqty">
<input type="number" value="14.0" class="numberinput form-control" id="id_inputformset-2-inputqty">
<input type="number" value="16.0" class="numberinput form-control" id="id_inputformset-3-inputqty">
Output should be 52.

You can use each and sum all float values The parseFloat() function parses an argument (converting it to a string first if needed) and returns a floating point number.
let sum = 0;
$('[id^=id_inputformset]').each(function(e){
sum +=parseFloat($(this).val());
})
console.log(sum);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="10.0" class="numberinput form-control" id="id_inputformset-0-inputqty">
<input type="number" value="12.0" class="numberinput form-control" id="id_inputformset-1-inputqty">
<input type="number" value="14.0" class="numberinput form-control" id="id_inputformset-2-inputqty">
<input type="number" value="16.0" class="numberinput form-control" id="id_inputformset-3-inputqty">

Finding the first empty input

<div class="input-group">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
</div>
I have only these inputs on a page and I'm trying to focus and enter a value dynamically into each empty input:
document.querySelector('input[value=""]').value = 1
... works but only for the first input, shouldn't this select the next empty input everytime?

This works:
document.getElementById('fill').addEventListener('click', evt => {
document.querySelector('input[value=""]').setAttribute('value', '1');
});
<div class="input-group">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
</div>
<button id="fill">Fill</button>
.value = ... is not actually changing the attribute itself in the DOM. Use .setAttribute to make the actual change in the DOM that querySelector can see.

How to pass value of one input to Multiple input?

I have multi input field like below
<td width="25%">
<input name="interest" id="interest" type="text" size="6" maxlength="6" />%
<input name="interest1" id="interest1" type="text" size="6" maxlength="6" />%1
..................
</td>
Now I want pass same value of one input field to other four input fields? how I will pass ? any idea ?

Just Try this.,
$("#interest").change(function(){
$('.myinput').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="interest" id="interest" type="text" size="6" maxlength="6" />%
<input name="interest1" class="myinput" type="text" size="6" maxlength="6" />%1
<input name="interest2" class="myinput" type="text" size="6" maxlength="6" />%2
<input name="interest3" class="myinput" type="text" size="6" maxlength="6" />%3
<input name="interest4" class="myinput" type="text" size="6" maxlength="6" />%4

How to add multiple models together in angular

I have some number inputs as so:
<input class="title form-control" id="quantity1" min="0" name="quantity1" ng-model="option1" type="number" value="0">
<input class="title form-control" id="quantity2" min="0" name="quantity2" ng-model="option2" type="number" value="0">
<input class="title form-control" id="quantity3" min="0" name="quantity3" ng-model="option3" type="number" value="0">
<input class="title form-control" id="quantity4" min="0" name="quantity4" ng-model="option4" type="number" value="0">
And in other number input I want to display the total quantity.
<input class="title form-control" id="quantity" min="0" name="quantity" ng-model="quantityTotal" type="number" value="0">
How would I go about adding multiple bindings together.

UPDATE: You can make use of value attribute of the control over here. So it would be like:
<input class="title form-control" id="quantity" min="0" name="quantity" value="{{option1+option2+option3+option4}}" type="number" />
Working Fiddle

There are two methods that readily jump to mind.
First you could use ng-change to call a function to update the total:
HTML:
<input class="title form-control" id="quantity1" min="0" name="quantity1" ng-change="onQuantityChange()" ng-model="option1" type="number">
<input class="title form-control" id="quantity2" min="0" name="quantity2" ng-change="onQuantityChange()" ng-model="option2" type="number">
<input class="title form-control" id="quantity3" min="0" name="quantity3" ng-change="onQuantityChange()" ng-model="option3" type="number">
<input class="title form-control" id="quantity4" min="0" name="quantity4" ng-change="onQuantityChange()" ng-model="option4" type="number">
<input class="title form-control" id="quantity" min="0" name="quantity" type="number" ng-model="quantityTotal">
Function:
$scope.onQuantityChange = function() {
$scope.quantityTotal = $scope.option1 + $scope.option2 + $scope.option3 + $scope.option4;
};
You could also just add an expression to the value of the total input like so:
<input class="title form-control" id="quantity" min="0" name="quantity" type="number" value="{{opt1+opt2+opt3+opt4}}">
Here are both solutions working on plnkr.
Side note the first approach would probably be the preferred as it is generally good practice to avoid putting your business logic into your markup.
Hope this helps. Cheers!