title: Dynamically ceate fields from select Javascript
body: <p>I have a javascript code that dynamicly create select lists from a select list.</p>
  
  <p>It's working fine, i just need to keep all created select lists shown after a page reload. Now, if i reload the page new select lists disappear.</p>
  
  <p>
      </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="selected_form_code"&gt;
              &lt;select id="select_btn"&gt;
                      &lt;option value="0"&gt;--How many rooms ?--&lt;/option&gt;
                      &lt;option value="1"&gt;1&lt;/option&gt;
                      &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id="form_submit"&gt;
      &lt;!-- Dynamic Registration Form Fields Creates Here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  function get_chambre_html(cn)
  {
    return "&lt;div&gt;"
        + "&lt;b&gt;Chambre " + cn + ":&lt;/b&gt; "
        + "Adultes: &lt;select id='adultes" + cn + "'&gt;"
        + "&lt;option value='0'&gt;--How many adults ?--&lt;/option&gt;"
        + "&lt;option value='1'&gt;1&lt;/option&gt;"
        + "&lt;option value='2'&gt;2&lt;/option&gt;&lt;/select&gt;"
        + "&lt;br/&gt;Enfants: &lt;select id='enfants" + cn + "'&gt;"
        + "&lt;option value='0'&gt;--How many enfants ?--&lt;/option&gt;"
        + "&lt;option value='1'&gt;1&lt;/option&gt;"
        + "&lt;option value='2'&gt;2&lt;/option&gt;&lt;/select&gt;"
        + "&lt;div id='ages" + cn + "'&gt;&lt;/div&gt;" // empty block for further usage
      +"&lt;/div&gt;";
  }
  
  $(document).ready(function()
  {
    $('select#select_btn').change(function()
    {
      var sel_value = $('option:selected').val();
      $("#form_submit").empty(); //Resetting Form
      // Below Function Creates Input Fields Dynamically
      create(sel_value);
      // Appending Submit Button To Form
    });
  
  
    function create(sel_value)
    {
      for (var i = 1; i &lt;= sel_value; i++)
      {
        $("div#form1").append($("#form_submit").append(get_chambre_html(i)));
        $("div#form1").append($("#form_submit").append("&lt;div id='ages"+i+"'/&gt;"));
        $('select#enfants'+i).change(function(){
          var infants = this.value;
          var i=this.id.substr(7); // 7 = strlen of 'enfants'
          for(var j=0; j&lt;infants; j++)
            $('#ages'+i).append(':[input age block '+i+']: ');
        });
      }
    };
  });
  &lt;/script&gt;
  </code></pre>