jquery suwak 0 - 10 dla pytania formularza

Próbując stworzyć prosty suwak dla danych wejściowych.

Korzystanie z klejnotu ankiety, który dodaje dodatkowe pola. Dodałem do pytania klasę o nazwie „jSlider” i wyświetla ona suwak, ale nie aktualizuje danych wejściowych.

Wygenerowany formularz html:

<fieldset class="q_default jSlider" id="q_353" name="17) On a scale of 0 to 10, ...">
  <legend><span>17) On a scale of 0 to 10, ...</span></legend>
  <ol><span class='help'></span>
    <input id="r_18_question_id" name="r[18][question_id]" type="hidden" value="353" />
    <input class="" id="r_18_answer_id" name="r[18][answer_id]" type="hidden" value="3840" />
    <li class="string optional" id="r_18_string_value_input"><input id="r_18_string_value" maxlength="255" name="r[18][string_value]" type="text" /></li>
  </ol>
</fieldset>

Mój JS jest:

$(".jSlider").each(function(){
    var newSlider = '<div style="margin-top:20px;margin-bottom:20px;" id="slider">0</div><br />';
    $(this).append(newSlider);
    $("#slider", this).slider({
        value:0,
        min: 0,
        max: 10,
        step: 1,
        slide: function( event, ui ) {
            alert(ui.value);
            // when append, it adds to the fieldset
            // first parent is the fieldset, next should be the ol, then the li 
            //       finally arriving at the input field
            $(this).parent().next("ol").next("li").next("input:text").val(ui.value);

                    }

    });

   });

EDYTOWAĆ

Proponowana zmiana mająca na celu ponowne naprawienie zduplikowanych identyfikatorów.

$(".jSlider").each(function(){
    var id = $(this).attr("id");
    var sliderID = id + "_slider";  
    alert(sliderID);
    var newSlider = '<div id="' + sliderID + '"></div><br />';
    $(this).append(newSlider);
    // or even
    // $(sliderID).slider({
    $(sliderID, this).slider({
        value:0,
        min: 0,
        max: 10,
        step: 1,
        change: function( event, ui ) {
               // alert(ui.value);
                // when append, it adds to the fieldset
                // first parent is the fieldset, next should be the ol, then the li 
                //       finally arriving at the input field
                $(this).closest('fieldset').find('input:text').val(ui.value);

                        }

    });

   });