jquery - jQueryUIと複数のスライダー

Question

ループを介して動的に作成された複数のスライダーから値を取得するにはどうすればよいですか？

jQueryコード：

<script>
    $(function() {
            var col_text = {
                       0: "",
                       1: "Yes",
                       2: "Not sure",
                       3: "No"
                    };       
            var col_code = {
                       0: "",
                       1: "#00be00",
                       2: "#f1ee00",
                       3: "#d30000"
                    };   

        $( ".slider" ).slider({
            value:0,
            min: 0,
            max: 3,
            step: 1,
            slide: function( event, ui ) {
                $( "#answer" ).val( col_text[ui.value] );
                $( "#answer" ).css("background-color", col_code[ui.value] );
            }
        });
        $( "#answer" ).val(col_text[$(".slider").slider("value")]);
        $( "#answer" ).css("background-color",col_code[$(".slider").slider("value")]);
    });
    </script>

ループ内のPHPコード：

                    echo "<div class=\"listing-wrapper\">";
                    echo "<div style=\"margin-left: 664px\"><input type=\"text\" id=\"answer\" style=\"border: 0; font-weight: bold; width: 60px;\" /></div>";                   
                    echo "<div style=\"width: 600px; float: left;\">";
                    echo "<h3 style=\"background-color:".$answer['color']."; display: inline; \"><a href=\"".$question['url']."\" target=\"_blank\">".$question['title']."</a></h3>";
                    echo "<div style=\"\">".$question['question']."</div><br /><br />";
                    echo "</div>";
                    echo "<div class=\"slider\" style=\"width: 100px; float: left;\"></div>";
                    echo "<div style=\"clear: both;\"></div>";
                    echo "</div>";

ループによって生成されたスライダーを移動すると、常に最初の質問インスタンスが「更新」されます。

ヒントをありがとう。