# How do I get total addition of three group?

Here I three groups with range slider and input. I want to apply two things.

1. Multiplication of range slider and the input.
2. 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;
})
});```
```<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">

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)
})
\$(".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">