set slider value row wise

set slider value row wise

I want the slider value from each row should set in the text box left to it.




I wrote the following code to do so.

$(document).ready(function(){
var div = $('<td class = "slidertd"><div class="slider"></div></td>');
$("div.answer_section tbody tr").append(div);
});
 $(function() {
    $( ".slider" ).slider({
      range: "max",
      min: 1,
      max: 100,
      value: 50,
      slide: function( event, ui ) {
$( ".slider" ).parent().parent().find("input:text").val(ui.value);
      }
    });
    
  });
 
but we I move slider hand then the value of current handle gets populated in all text boxes on the left. Please help me.