how to get the value of slider displayed in separate hidden field?
<p>here is the code.......</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Papermashup.com | jQuery UI Slider Demo&lt;/title&gt;
&lt;link href="../style.css" rel="stylesheet" type="text/css" /&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt; 
        &lt;style type="text/css"&gt; 
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}


        &lt;/style&gt; 

        &lt;script type="text/javascript"&gt;
        $('document').ready(function(){
            $('#submit').click(function(){

var username=$('#hidden').val();
if(username=="")
username = 50;
$.post('comment.php',{hidden:username},function(return_data){
alert(return_data);
});
});
});
        &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;



        &lt;div class="slider" id="one"&gt;&lt;/div&gt; 
        &lt;div class="slider" id="two"&gt;&lt;/div&gt; 
        &lt;div id="slider-result"&gt;&lt;/div&gt;   
        &lt;form&gt;
&lt;input type="hidden" id="hidden1"/&gt;

&lt;input type="hidden" id="hidden2"/&gt;

&lt;input type="button" id="submit" value="submit"/&gt;
&lt;/form&gt;


           &lt;script&gt; 

                 $( ".slider" ).slider({
                animate: true,
                range: "min",
                value: 50,
                min: 10,
                max: 100,
                step: 10,

                //this updates the hidden form field so we can submit the data using a form
                slide: function(event, ui) { 

                $( "#slider-result" ).html( ui.value );
$("#one").click(function(){
                $('#hidden1').attr('value', ui.value);});
$("#two").click(function(){
                $('#hidden2').attr('value', ui.value);});
                }
                });


        &lt;/script&gt; 



&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the above code generates a two slider . when the slider is clicked the value is displayed in Hidden field.... but i have made two sliders on clicking first slider the value is displayed in "hidden1" correctly. if i click the second slider the value is again displayed in "hidden1" and not in "hidden2"...what may be pbm . i tried various times but could not figure out that?????</p>
