Как сделать два ползунка на сайте?

Question

[noralesma]

Вот уже рабочий скрипт на ползунок.
Но никак не получается добавить такой второй. Где-то в скриптах допускаю ошибку.
Получается в поле второго ползунка записывается значение 1 ползунка.
А нужно, чтобы у каждого было свое значение.
Что нужно исправить в коде?

<div class="""slidecontainer">
  <input type="range" min="1" max="100" value=" " class="slider" id="myRange" onchange="costCalculator()">
  <p style="font-size: 16px; margin-top: 20px; margin-left: 20px;"><span id="demo"></span></p>
</div>
  <div class="""slidecontainer">
  <input type="range" min="1" max="100" value=" " class="slider" id="myRange1" onchange="costCalculator()">
  <p style="font-size: 16px; margin-top: 20px; margin-left: 20px;"><span id="demo1"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

<script>
var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

Answer 1

[Lord_Dantes]

Попробуйте убрать цифру из ID и написать буквами там где myRange1 | myRangeOne