javascript - JavaScript で複数のスライダーを更新する innerHTML

Question

ユーザーがテーブル内の複数のスライダーを調整するテーブル フォームを作成しています。スライダーごとに画面に表示する値を更新したい。でこれをやろうとしたのですgetElementsByClassNameが、1 つのスライダーを調整すると、出力値が他のすべてのスライダーに表示されます。各スライダー (約 20 個あります) に ID を割り当てることができると思いますが、これを行うためのより効率的な方法があるかどうか疑問に思っていました。

テーブル入力の html コードのサンプルを次に示します。

<form>
<table>
    <tr>
        <th rowspan="5" id="A"></th>
        <td></td>    
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>    
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>

    </tr>
    <tr>
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>    
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>
    </table>
   </form>

と JS コード:

//called when the user clicks the start button on the home page.
function start(){
var decisionA = prompt("Enter A:","");
var decisionB = prompt("Enter B:","");

//send user prompt inputs to A and B cells in the table<th>.
document.getElementById('A').innerHTML = decisionA;
document.getElementById('B').innerHTML = decisionB;
}

function sliderChange (val){
     var sliders = document.getElementsByClassName('sliderStatus');
     for (i = 0; i < sliders.length; i++){
     sliders[i].innerHTML = val;
     }
   }

スライダー値のテキストに、テーブル内の個々のスライダーごとに調整されたスライダー値を表示する方法はありますgetElementsByClassNameか、またはすべてのスライダーに 20 個の異なる ID を割り当てる必要がありますか? ありがとう。