title: Calculate the sum of multiple inputs - jQuery Range Slider
body: <p>I am attempting to calculate the sum of multiple jQuery range sliders.  There are many results on stackoverflow when it comes to this, most are not what I'm trying to accomplish, and others show 2 sliders as an example, when I try to add more it breaks (not sure what I'm doing really)..</p>
  
  <p>Here is what I have, 6 sliders, and then I want it to calculate the overall rating after the last one.
  <a href="http://fasterforms.com/images/111914.png" rel="nofollow">http://fasterforms.com/images/111914.png</a></p>
  
  <p>Here is a working fiddle, but as I said, when I try to either add onto the example it breaks, or it is for a "text" input and when I made it a jQuery "range" input it doesn't work.</p>
  
  <p><a href="http://jsfiddle.net/DULYW/2/" rel="nofollow">http://jsfiddle.net/DULYW/2/</a></p>
  
  <hr>
  
  <p>Here is the closest one I've got to work with 2 range sliders, but when I try to add more based off the code it doesn't work either.</p>
  
  <pre><code> &lt;script type="text/javascript"&gt; 
   function calc(A,B,SUM) { 
   var one = Number(A); 
   if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } 
   var two = Number(document.getElementById(B).value);  
   if (isNaN(two)) { alert('Invalid entry: '+B); two=0; } 
   document.getElementById(SUM).value = one + two; 
   } 
   &lt;/script&gt; 
  
  Enter a number: 
       &lt;input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" type="range" min="0" max="5" data-highlight="true" /&gt; 
  and another number: 
       &lt;input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" type="range" min="0" max="5" data-highlight="true" /&gt; 
  Their sum is: 
       &lt;input name="sum" value="" id="result" readonly style="border:0px;"&gt; 
  </code></pre>
  
  <p>It always seems anything that works normally for me always refuses to work the same way once I add it to my jQuery mobile pages, any help would be awesome.</p>