title: How to create clone of dropdown list with auto incremented ID using jquery
body: <p>I want to create clone of two Select Box as per the first Select Box values with the auto incremented ID of each. 
  Here is my HTML Code.</p>
  
  <pre><code>First Step (Total Rooms)
  -----------------------------------
  &lt;div class="row"&gt;
   &lt;div class="col-md-7"&gt;
     &lt;select name="select" id="total_rooms" class="form-control"&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;/select&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  Second Step (Rooms Allotment)
  -----------------------------------
  &lt;div id="room-allot-row" class="row"&gt;
   &lt;div class="col-md-7"&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-sm-4"&gt;
           &lt;input type="text" id="setro" class="form-control" value="" readonly&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
           &lt;select name="select" id="adults" class="form-control" name="adults"&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;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
           &lt;select name="select" id="kids" class="form-control" name="adults"&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;/select&gt;
        &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I select value on total_rooms = 3, three row will added for Rooms Allotment with said html and setro, adults, kids ID will set as -</p>
  
  <pre><code>setro_1, adults_1,kids_1, 
  setro_2, adults_2, kids_2,
  setro_3, adults_3, kids_3,
  ..... ..... ......
  </code></pre>
  
  <p>also <strong>room-allot-row</strong> as <code>room-allot-row-1, room-allot-row-2, room-allot-row-3</code></p>
  
  <p>I am sure it can possible in jquery.</p>
  
  <p>I have used this code:</p>
  
  <pre><code>$('#sroom').on('change', function(){
              var max = $(this).find(":selected").val();
              var r = 0;
              $('.room-group').empty();
              for (var i=0; i&lt;max; i++){
                  r++;
                  $(".room-group").append('&lt;div id="room-allot-row-'+r+'" class="row"&gt;&lt;div class="col-sm-4"&gt;&lt;label class="control-label"&gt;Room No&lt;/label&gt;&lt;input type="text" name="roomno-'+r+'" class="form-control" value="'+r+'" readonly&gt;&lt;/div&gt;&lt;div class="col-sm-4"&gt;&lt;label for="rooms" class="control-label"&gt;Adults&lt;/label&gt;&lt;select id="adults-'+r+'" class="form-control" name="adults-'+r+'"&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;/select&gt;&lt;span class="help-block"&gt;12+ Yrs.&lt;/span&gt;&lt;/div&gt;&lt;div class="col-sm-4"&gt;&lt;label for="rooms" class="control-label"&gt;Kids&lt;/label&gt;&lt;select name="kids-'+r+'" id="kids-'+r+'" class="form-control"&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;/select&gt;&lt;span class="help-block"&gt;12+ Yrs.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;');
  
              }
  
          });
  </code></pre>
  
  <p>How do I do it using jquery.</p>