Hi,

Please help!

I have some form elements in a div on a page:

<div id="box">
   <div id="template">
       <div>
       <label for="username">Username</label>
       <input type="text" class="username" name="username[]" value="" / >
       <label for="hostname">hostname</label>
       <input type="text" name="hostname[]" value="">
       </div>
    </div>
</div>

using jquery I would like to take a copy of #template, manipulate the values of the inputs and insert it after #template so the result would look something like:

<div id="box">
   <div id="template">
       <div>
       <label for="username">Username</label>
       <input type="text" class="username" name="username[]" value="" / >
       <label for="hostname">hostname</label>
       <input type="text" name="hostname[]" value="">
       </div>
    </div>
       <div>
       <label for="username">Username</label>
       <input type="text" class="username" name="username[]" value="paul" / >
       <label for="hostname">hostname</label>
       <input type="text" name="hostname[]" value="paul">
       </div>
</div> 

I am probably going about this the wrong way but the following test bit of javascript code run in firebug on the page does not seem to change the values of the inputs.

var cp = $('#template').clone();

cp.children().children().each( function(i,d){
    if( d.localName == 'INPUT' ){
        $(d).val('paul'); //.css('background-color', 'red');
     }
    });
$("#box").append(cp.html());

although if I uncomment "//.css('background-color', 'red');" the inputs will turn red.