javascript - Set the text of a textbox inside a duplicated div -

i have master div contains multiple divs , textbox inside. inside textbox user types content.

after user done typing contents duplicating entire master div. when duplicate master div, can duplicate except contents of textbox inside.

the way did copying html of master div in javascript. appreciate if me.

the master div createmain1 here

<div id="createmain1" class="createmainclass1">   <div id="leftbox1">     <!--<p>the preview left div</p>-->     <div id="createmain1leftframe1" style="height: 100%; background-repeat: no-repeat; width: 100%;">       <div id="createmain1leftframe2" style="height: 100%; background-repeat: no-repeat; width: 100%;">         <div id="createmain1leftframe3" style="height: 100%; background-repeat: no-repeat; width: 100%;">           <div id="createmain1leftframe4" style="height: 100%; background-repeat: no-repeat; width: 100%;">             <textarea id="lefttext1" spellcheck="true" maxlength="500" wrap="hard" style="width: 100%; font-family: 'gillsanslightregular'; overflow:hidden; resize:none; font-size:20px; border:none; height: 100%; background-color:transparent" placeholder="enter text here"></textarea>           </div>         </div>       </div>     </div>   </div>   <div id="rightbox1">     <!--<p>the preview right div</p>-->     <div id="createmain1rightframe1" style="height: 100%; background-repeat: no-repeat; width: 100%;">       <div id="createmain1rightframe2" style="height: 100%; background-repeat: no-repeat; width: 100%;">         <div id="createmain1rightframe3" style="height: 100%; background-repeat: no-repeat; width: 100%;">           <div id="createmain1rightframe4" style="height: 100%; background-repeat: no-repeat; width: 100%;">             <textarea id="righttext1" spellcheck="true" maxlength="500" wrap="hard" style="width: 100%; font-family: 'gillsanslightregular'; overflow:hidden; resize:none; font-size:20px; border:none; height: 100%; background-color:transparent" placeholder="enter text here"></textarea>           </div>         </div>       </div>     </div>   </div> </div> 

the place duplicating is

 <div id="finalimage" style="background-color:lightcoral" ></div> 

javascript wrote is

$("#preview").click(function () {   var firstdiv = $("#createmain1").html();   var lefttext = $("#lefttext1").val();   $("#finalimage").css("height", "310px");   $("#finalimage").css("width", "460px");   $("#finalimage").html(firstdiv);   $("#finalimage").children("#leftbox1").css("height", "300px");   $("#finalimage").children("#leftbox1").css("width", "225px");   $("#finalimage").children("#leftbox1").css("float", "left");   $("#finalimage").children("#rightbox1").css("height", "300px");   $("#finalimage").children("#rightbox1").css("width", "225px");   $("#finalimage").children("#rightbox1").css("float", "left");   $("#finalimage").children("#lefttext1").val(lefttext); } 

what looks happening grabbing first div here:

var firstdiv = $("#createmain1").html(); 

add code in emulate divs:

$("#finalimage").html(firstdiv); 

and aren't doing it.

you cannot replicate ids. rebuild divs in new system jquery rather copying html 1 another.

edit:

i have included jsfiddle example check out. if want keep same, can use .find() grab text area , set info.

http://jsfiddle.net/eqalw/