Multiple Sliders Repeating Myself in Code

Question

I have kind of a mess in my code. In a parameter tab there are three sliders and maybe in the future there can be even more sliders.

 let slider1 = document.getElementById("hello_interval_input");
 let output1 = document.getElementById("demo1");
 output1.innerHTML = slider1.value;

        slider1.oninput = function() {
            output1.innerHTML = this.value;
        };

let slider2 = document.getElementById("hello_loss_input");
let output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;

        slider2.oninput = function() {
              output2.innerHTML = this.value;
        };

let slider3 = document.getElementById("hello_routeTimeout_input");
let output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;

        slider3.oninput = function() {
            output3.innerHTML = this.value;
        };

Question How can I avoid repeating myself and write this cleaner?

UPDATE I have tried the solution with the for each loop but then I ran into the problem that the values will not update with the motion of the slider. Instead they will update when I let the slider go.

Answer 1

document.querySelectorAll(".input").forEach( el => el.addEventListener('change', ( event) => {
    document.getElementById(el.dataset.dest).innerHTML = el.value;
}));

<input type="text" class="input" data-dest="output1">
<input type="text" class="input" data-dest="output2">
<input type="text" class="input" data-dest="output3">

<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

You can create it something like this