Finding values for multiple range sliders

Question

I am new to coding and I trying to find value for multiple range sliders on a website. I have this code which works well with the first range slider. My problem is I have 3 more range sliders which I can't seem to make work using the only 1 javascript. I tried using get.documentElementsByClassName for the input and output, however the javascript only seems to work when I am using ID. Thus I have to create multiple id for a function doing the same thing. Is there something I am missing? Any help would be appreciated.

  <form>

          <input type="range" id="rating" min="-100" max="100" default="0" step="1" class="slider" /><br>Speed:

          <output id="outvalue"></output>
          <input type = "range" id="rating2" min='0' max="100" default ="0" step="1" class="slider"/>
    <br>Speed:
    <output id="outvalue2"></output>
    </form> 


</form>

    <script>
        var input = document.getElementById("rating");
        var output = document.getElementById("outvalue");
        output.innerHTML = input.value;
        input.oninput = function() {
          output.innerHTML = this.value;

var input2 = document.getElementById("rating2");
    var output2 = document.getElementById("outvalue2");
    output2.innerHTML = input2.value;
    input2.oninput = function() {
      output2.innerHTML = this.value;
        }
    </script>

Demo