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. I know the code is wrong. Answer You can give common class to your amt input as well then use index

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.

Answer

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>

Advertisement

Answer