How to set value in dynamically added rows form using jquery?

Question

I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.

This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":

while($personsArrayLength>2){
        echo '
            <script>
            $(document).ready(function(){
                var i = 2;
                var rowTemplate2 = jQuery.format($("#template2").html());

                rowTemplate2.value = "xx";
                addRow2();

                function addRow2(){
                    var ii = i++;
                    $("#app_here2").append(rowTemplate2(ii));
                    $("#delete_" + ii).click(function(){
                        $("#row_" + ii).remove();
                    });
                }
            });
        </script>
    ';

Here is html for that:

function addRows2(){

    global $personsError_css;
    $personsArray = $_POST['persons'];
    JB_var_dump($_POST['whichRow']);
        $html = '<table id="template2" align="right" style="display:none; ">
            <tr id="row_{0}">
                <td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
                <td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
            </tr>
        </table>
        <table id="list2" style="margin-left:200px;">
            <thead >
                <tr>
                    <th></th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="2" id="app_here2"></td>
                </tr>
            </tbody>
        </table>';
        return $html;
} 

This is properly filled form

In this epty fields I want to add values "xx"

Sorry for my english.

How can i set values in added rows? What i should change in my code? Thanks for help.

Answer 1

Change your 'addRow2' to this:

function addRow2(){
    var ii = i++;
    $("#app_here2").append(rowTemplate2(ii));
    //UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
    $("#template2").find("input:empty").val("xx");; // added this row
    $("#delete_" + ii).click(function(){
        $("#row_" + ii).remove();
    });
}