how to live populate div using dynamically generated html input types

Question

i'm trying to populate div with select option but i don't really now where to start...

i have some code to live edit the "title" of the div, but now i want to add to a specific div his option...

Here's the code that i have for now:

 var rooms = $("#howmanyrooms").val();
            var roomcounter = 1;
            $(".design-your-system-page-playground-container").show();
            for (var i = 0; i < 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 you want the room to be 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 you can see, when i click the button, i'll append to the parent as many child divs as the value typed into the textbox and i also create the same number of "row" containing the name and other option (two select and a radio) i'm already able to live edit the name of the ralative div, but now i want to add to that div also the other options

here a jsfiddle to help you understand what i have and what i want: http://jsfiddle.net/3cyST/

if is not clear please tell me. thanks

Answer 1

please check this fiddle:

i made your target variable global to be reusable, i also added a class for your first select element which is selecting

ive updated it and it now appends the value of your test onchange using:

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

you can work for the rest now.

EDIT ( for the question of OP on the comment ) :

to get value of radio button i'll give you 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();

Answer 2

give the select an id, then use

$("#id").on("change",function(){
    console.log(this.value);
    //whatever you want to do with the value
})

...same for the radio buttons and other options...also note that the radio buttons shouldn't have different names:

<input type='radio' name='radio_{put id here}' value='yes'>Yes</input>
<input type='radio' name='radio_{put id here}' value='no'>No</input>

another thing for the readabillity of the code: try using a template....just put a <noscript> with an id in the code...use some distinctive syntax to put placeholders in it, and replace them at runtime:

HTML:

<noscript id="template">
    RoomName: <input type="text" id="roomName_%ROOMID%" />
    Do you want...
    <input type='radio' name='radio_%ROOMID%' value='yes'>Yes</input>
    <input type='radio' name='radio_%ROOMID%' value='no'>No</input>
</noscript>

JS:

for (var i = 0; i < rooms; i++) {
    var tplcode = $("#template").html();
    tplcode = tplcode.replaceAll("%ROOMID%",roomcounter);
    $($.pareHTML(tplcode)).appendTo(".design-your-system-page-edit-room-container");

    $("input[name='radio_"+roomcounter+"']").on("change",function(){
        console.log("user wants:" + $("input[name='radio_"+roomcounter+"'][checked]").val())
    });
    roomcounter++;
}



// these functions help replacing multiple occurances
String.prototype.replaceAll = function(find,replace){
    return this.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

//escapse all regEx chars, so the string may be used in a regEx
function escapeRegExp(str) {
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

Fiddle: http://jsfiddle.net/3cyST/4/