我试图将两个不同的滑块放在同一个页面上。如果我只对一个滑块执行下面的操作，它就可以正常工作：

<h3>Strength of Belief</h3>
<div class="slidecontainer">
<div class="slider_left">
    <span id="belief_value"></span>%
</div>
<div class="slider_mid">
    <input type="range" min="1" max="100" value="50" class="slider" id="oldbelief">
</div>
</div>

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

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

但是，如果我尝试使用下面的代码添加第二个滑块，则第二个滑块上的值显示不起作用：

<h3>Strength of Belief</h3>
<div class="slidecontainer">
<div class="slider_left">
    <span id="belief_value"></span>%
</div>
<div class="slider_mid">
    <input type="range" min="1" max="100" value="50" class="slider" id="oldbelief">
</div>
</div>

<h3><i>New</i> Strength of Belief in Negative Cognition</h3>
<div class="slidecontainer">
<div class="slider_left">
    <span id="belief2_value"></span>%
</div>
<div class="slider_mid">
    <input type="range" min="1" max="100" value="50" class="slider2" id="newbelief">
</div>
</div>

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

slider.oninput = function() {
  output.innerHTML = this.value;
}
var slider2 = document.getElementById("newbelief");
var output2 = document.getElementById("belief2_value");
output.innerHTML = slider.value;

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

如果重要，请在此处查看 CSS：

.slider_left {
    display: inline-block;
    width: 10%;
    text-align: center;
    font-weight: normal;
    font-size: 30px;
    color: #fff;
}

.slider_mid {
    display: inline-block;
    width: 79%;
}
.slidecontainer {
  width: 100%;
}

.slider, .slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #999;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

有人知道我做错了什么吗？我是 javascript 新手，所以我的错误可能非常令人尴尬。