How to assign value to input which is created on the fly

Question

I am trying to update the value of an input field that is part of DOM that is created on the fly without success. Could someone please tell me what I am doing wrong. Thanks.

HTML

<div class="hidden-institution-form hide">
    <form class="form-horizontal forms" role="form">
       <input type="text" id="code">
    </form>
</div>

JQUERY

//Create an empty Div and clone the content of .hidden-institution-form in it
var frm = $('<div class="institution-form" id="institution-form"/>').append($(".hidden-institution-form").clone());

//Remove the hide class
$(frm).find(".hidden-institution-form").removeClass("hide");

//Replace .hidden-institution-form with .instutition
$(frm).find(".hidden-institution-form").removeClass("hidden-institution-form").addClass("instutition");

//Locate the input field #code and change it value
$("#institution-form").find("#code").val('some value'); //This does not work

Answer 1

Could someone please tell me what I am doing wrong

You're not adding the created element to the DOM.

frm element is just created in local scope, whereas $("#institution-form") searches elements in the DOM

Answer 2

The main problem is you are not adding the newly created element to the dom. So when you do execute the id selector #institution-form it will not be able to find the new element.

The other problem I see is if you create multiple instances of this block, there will be multiple elements with the id institution-form which will cause a problem in finding the correct element to set the value.

So in places where you clone or create multiple insteances of an element use calsses insted so

<div class="hidden-institution-form hide">
    <form class="form-horizontal forms" role="form">
        <input type="text" class="code"/>
    </form>
</div>

then

//Create an empty Div and clone the content of .hidden-institution-form in it
var frm = $('<div class="institution-form" />').append($(".hidden-institution-form").clone());

//Remove the hide class
$frm.find(".hidden-institution-form").removeClass("hide");

//Replace .hidden-institution-form with .instutition
$frm.find(".hidden-institution-form").removeClass("hidden-institution-form").addClass("instutition");

//Locate the input field #code and change it value
frm.find(".code").val('some value'); //This does not work

Answer 3

Once you remove the class hidden-institution-form you only add the class "institution" so the following code should work:

UPDATE: Among some spelling errors, the methods in which you were using were off. Try this:

//Create an empty Div and clone the content of .hidden-institution-form in it

var frm = $('<div class="institution-form" id="institution-form"/>').append($(".hidden-institution-form").clone());

//Remove the hide class
$(".hidden-institution-form").removeClass("hide");

//Replace .hidden-institution-form with .instutition
$(".hidden-institution-form").removeClass("hidden-institution-form").addClass("institution");

//Locate the input field #code and change it value
$(".institution").find("#code").val('some value'); //This does not work

JSFIDDLE: http://jsfiddle.net/de7Hv/