Cant dynamically add Function - html

Question

On my html page I have a table that has dynamically added table rows once a button is clicked. Here is the code behind it. What I am trying to do is add a slider bar to one of the td's. After that I will be taking the value of that slider bar and put it into a cookie. My question is why doesnt this work?
$(function(){
$( "#tabs" ).tabs();
});
$(function() {
$( document ).tooltip();
});
$(function () {
$("#labSlider").slider(
{
orientation:"horizontal",
range:"min",
min: 0,
max: 25,
value: 15,
slide: function(event, ui){$("#amount").val(ui.value);}
}
);
$("#amount").val($("#labSlider").slider("value"));
});
function labAddRow(){
var labRows = $('#labTable tr').length; //how many rows in table
if (labRows <= 10){
var newRow = $('<tr><td>' + labRows + '</td><td><div id ="labSlider"></div></td><td><input type="text" class="text_field" maxlength="2" size="2" onchange="calculateGrade()" title= "What did you score on lab '+ labRows+'?"/></td><td>' + "/25" + '</td></tr>'); //create the new row
$('#labTable').append(newRow);
}
}

Answer 1

Passing a function to jQuery causes it to be called when the DOM is ready. It doesn’t execute automatically for DOM changes or anything like that.
Learn to love the DOM! Functions too! You can make a function to create an appropriate slider for an element, then use it whenever you add a row. And I’m not sure what #amount is, but it might need to be corrected to match element.
$(function() {
$('#tabs').tabs();
$(document).tooltip();
});
function createSlider(element) {
$(element).slider(
{
orientation:"horizontal",
range:"min",
min: 0,
max: 25,
value: 15,
slide: function(event, ui){$("#amount").val(ui.value);}
}
);
$("#amount").val($(element).slider("value"));
}
function labAddRow() {
var labRows = $('#labTable tr').length; //how many rows in table
if (labRows <= 10) {
var textField = $('<input>', {
type: 'text',
'class': 'text_field',
maxlength: 2,
size: 2,
title: 'What did you score on lab ' + labRows + '?'
}).on('change', calculateGrade);
var slider = $('<div>', { id: 'labSlider' });
var newRow = $('<tr>').append(
$('<td>').text(labRows),
$('<td>').append(slider),
$('<td>').append(textField),
$('<td>', { text: '/25' })
);
createSlider(slider);
$('#labTable').append(newRow);
}
}