javascript - how to live populate div using dynamically generated html input types -

i'm trying populate div select option don't start...

i have code live edit "title" of div, want add specific div option...

here's code have now:

 var rooms = $("#howmanyrooms").val();             var roomcounter = 1;             $(".design-your-system-page-playground-container").show();             (var = 0; < rooms; i++) {                 //    $("<div class='appendeddiv'>room-" + roomcounter++ + "</div>").appendto(".housecontainer");                 //    $("<span>room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id'></div></br>").appendto(".infoncontainer");                 //                 $("<div class='design-your-system-page-rooms targetdiv_" + roomcounter + "'>room-" + roomcounter + "</div>").appendto(".design-your-system-page-house");                 $("<span>room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id' class='textinput' lang='targettext_" + roomcounter + "'>&nbsp<select>heating<option value='radiator'>radiator</option><option value='underfloor'>underfloor</option><option value='electric'>electric</option></select>&nbsp;<select class='design-your-system-number-of-radiator-select'><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option></select>&nbsp;<span>do want room smart (footprint) ?<input type='radio' name='smart-yes' value='smart-yes'>yes</input>&nbsp;<input type='radio' name='smart-no' value='smart-no'>no</input></div></br>").appendto(".design-your-system-page-edit-room-container");                 roomcounter++;             };             if ($('.design-your-system-page-house').find('.design-your-system-page-rooms').length) {                 $("#buttonaddrooms").hide();             }              $("input.textinput").on("keyup", function () {                 var target = $(this).attr("lang").replace("text", "div");                 $("." + target).text($(this).val());             }); 

as can see, when click button, i'll append parent many child divs value typed textbox , create same number of "row" containing name , other option (two select , radio) i'm able live edit name of ralative div, want add div other options

here jsfiddle understand have , want: http://jsfiddle.net/3cyst/

if not clear please tell me. thanks

please check this fiddle:

i made target variable global reusable, added class first select element selecting

ive updated , appends value of test onchange using:

 $("select.selecting").on("change", function () {                 $("." + target).append($(this).val());             }); 

you can work rest now.

edit(for question of op on comment) :

to value of radio button i'll give 2 ways :

in javascript :

if (document.getelementbyid('id_of_radio').checked) {   rate_value = document.getelementbyid('id_of_radio').value; } 

in jquery :

$("input[name=radio_name]:checked").val();