桌面上的bootstrap时间范围滑块多行？ （ASP .net MVC）

Question

我正在尝试使用bootstrap时间滑块。但我有问题。 即使FirstTime和SecondTime不同，所有行在我的表上看起来都是相同的值

@foreach (var item in Model)
        {
            <tr>
                <td>
                    Time Range: <span class="slider-time">@item.FirstTime AM</span> - <span class="slider-time2">@item.SecondTime PM</span>
                </td>
                <td>
                    <div class="time-range">
                        <p>
                            Time Range: <span class="slider-time">@item.FirstTime AM</span> - <span class="slider-time2">@item.SecondTime PM</span>

                        </p>
                        <div class="sliders_step1">
                            <div id="slider-range"></div>
                        </div>
                    </div>
                </td>
            </tr>

        }

Js文件在下面。我不确定也许我无法使用正确的jquery选择器。

$(".sliders_step1 #slider-range").slider({
    range: true,
    min: 0,
    max: 1440,
    step: 15,
    values: [540, 1020],
    slide: function (e, ui) {
        console.log("dd");
        var hours1 = Math.floor(ui.values[0] / 60);
        var minutes1 = ui.values[0] - (hours1 * 60);

        if (hours1.length == 1) hours1 = '0' + hours1;
        if (minutes1.length == 1) minutes1 = '0' + minutes1;
        if (minutes1 == 0) minutes1 = '00';
        if (hours1 >= 12) {
            if (hours1 == 12) {
                hours1 = hours1;
                minutes1 = minutes1 + " PM";
            } else {
                hours1 = hours1 - 12;
                minutes1 = minutes1 + " PM";
            }
        } else {
            hours1 = hours1;
            minutes1 = minutes1 + " AM";
        }
        if (hours1 == 0) {
            hours1 = 12;
            minutes1 = minutes1;
        }



        $('.slider-time').html(hours1 + ':' + minutes1);

        var hours2 = Math.floor(ui.values[1] / 60);
        var minutes2 = ui.values[1] - (hours2 * 60);

        if (hours2.length == 1) hours2 = '0' + hours2;
        if (minutes2.length == 1) minutes2 = '0' + minutes2;
        if (minutes2 == 0) minutes2 = '00';
        if (hours2 >= 12) {
            if (hours2 == 12) {
                hours2 = hours2;
                minutes2 = minutes2 + " PM";
            } else if (hours2 == 24) {
                hours2 = 11;
                minutes2 = "59 PM";
            } else {
                hours2 = hours2 - 12;
                minutes2 = minutes2 + " PM";
            }
        } else {
            hours2 = hours2;
            minutes2 = minutes2 + " AM";
        }

        $('.slider-time2').html(hours2 + ':' + minutes2);
    }
});

如何显示每个行值来自db？ 第一个td很好地工作但行后不能正常工作.. 感谢。