title: how to live populate div using dynamically generated html input types
body: <p>i'm trying to populate div with select option but i don't really now where to start...</p>
  
  <p>i have some code to live edit the "title" of the div, but now i want to add to a specific div his option...</p>
  
  <p>Here's the code that i have for now:</p>
  
  <pre><code> var rooms = $("#howmanyrooms").val();
              var roomcounter = 1;
              $(".design-your-system-page-playground-container").show();
              for (var i = 0; i &lt; rooms; i++) {
                  //    $("&lt;div class='appendeddiv'&gt;Room-" + roomcounter++ + "&lt;/div&gt;").appendTo(".housecontainer");
                  //    $("&lt;span&gt;Room-" + roomcounter + " name&lt;/span&gt;&amp;nbsp;&lt;input type='text' placeholder='name' id='room-" + roomcounter + "-id'&gt;&lt;/div&gt;&lt;/br&gt;").appendTo(".infoncontainer");
                  //
                  $("&lt;div class='design-your-system-page-rooms targetDiv_" + roomcounter + "'&gt;Room-" + roomcounter + "&lt;/div&gt;").appendTo(".design-your-system-page-house");
                  $("&lt;span&gt;Room-" + roomcounter + " name&lt;/span&gt;&amp;nbsp;&lt;input type='text' placeholder='name' id='room-" + roomcounter + "-id' class='textInput' lang='targetText_" + roomcounter + "'&gt;&amp;nbsp&lt;select&gt;Heating&lt;option value='radiator'&gt;Radiator&lt;/option&gt;&lt;option value='underfloor'&gt;Underfloor&lt;/option&gt;&lt;option value='electric'&gt;Electric&lt;/option&gt;&lt;/select&gt;&amp;nbsp;&lt;select class='design-your-system-number-of-radiator-select'&gt;&lt;option value='0'&gt;0&lt;/option&gt;&lt;option value='1'&gt;1&lt;/option&gt;&lt;option value='2'&gt;2&lt;/option&gt;&lt;option value='3'&gt;3&lt;/option&gt;&lt;option value='4'&gt;4&lt;/option&gt;&lt;option value='5'&gt;5&lt;/option&gt;&lt;option value='6'&gt;6&lt;/option&gt;&lt;option value='7'&gt;7&lt;/option&gt;&lt;option value='8'&gt;8&lt;/option&gt;&lt;option value='9'&gt;9&lt;/option&gt;&lt;/select&gt;&amp;nbsp;&lt;span&gt;Do you want the room to be smart (footprint) ?&lt;input type='radio' name='smart-yes' value='smart-yes'&gt;Yes&lt;/input&gt;&amp;nbsp;&lt;input type='radio' name='smart-no' value='smart-no'&gt;No&lt;/input&gt;&lt;/div&gt;&lt;/br&gt;").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());
              });
  </code></pre>
  
  <p>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</p>
  
  <p>here a jsfiddle to help you understand what i have and what i want:
  <a href="http://jsfiddle.net/3cyST/" rel="nofollow">http://jsfiddle.net/3cyST/</a></p>
  
  <p>if is not clear please tell me.
  thanks</p>