How to set values in dynamically created text boxes

Question

In my app I am creating some dynamic textboxes by clicking an add button. We can put some values and time also. Now my need is that when the page loads, I want a given number of textboxes to be created and populated by a set of values. I am able to create the text boxes onload but cannot set the values. Here I am giving a fiddle where I have created my functionality. How can I set some values dynamically? Here is the fiddle MYFIDDLE

And also I want timepicker function in those onload created boxes.

function getTextBoxAfterValiddation(val){
var str_array = ['jeet','chatterjee'];
var randomId = '\''+"#interviewName"+val+'\'';
var nameId = "interviewName"+val+"";
var allNames = str_array.replace(/((\[)|(\]))/g,"");
alert(randomId)
$(randomId).val(arr[val]);


return '<input class="txt1" name = "DynamicTextBox" type="text" id = "'+nameId+'"/>';
}   


for(var i = 0; i < 4; i++){
    var div = $("<div />");
    div.html(getTextBoxAfterValiddation(i));
    $("#TextBoxContainer").append(div);       
}

Answer 1

When you dynamically generate each element increment a counter and use that value as the elements id. Then you can put html or values into each element using jquery. In the example below every time i click a button with id "addphys" i append a new div on. Later i can grab values from each div because i know the count and each new div id is phys1, phys2, phys3...

var numphys = 0;
$("#addphys").click(function(){

    $("#test").append("<div class=\"addedphys\"><p id=\"phys"+ numphys +     "\"><p><label>Physician Username:</label><input type=\"text\" class=\"inputbox\" id=\"physusername" + numphys + "\" name=\"pass\"></p><p><label>Physician Password:</label><input type=\"text\" class=\"inputbox\" id=\"physpassword" + numphys + "\"  name=\"pass\"></p></p></div>");
    numphys += 1;
});

Hope that helps.