Clone HTML элементы с JQuery

Question

У меня есть следующие элементы

<div class="col-xs-4"> 
     <label>Camere</label> 
     <div class="selector"> 
      <select id='rooms' class="full-width"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      </select> 
     </div> 
    </div> 
    </div> 
    <hr> 
    <!--START--> 
    <div id="room-1"> 
    <h5 class="title">CAMERA 1</h5> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <label>ADULTS</label> 
      <div class="selector"> 
      <select id='adults-1' name="rooms[0][adult]" class="full-width"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
      </select> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <label>Copii</label> 
      <div class="selector"> 
      <select id='kids-1' name="rooms[0][child]" class="full-width"> 
       <option value="0">0</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       > 
      </select> 
      </div> 
     </div> 
    </div> 
    <div class="age-of-children no-display"> 
     <div class="row"> 
      <div class="col-xs-4 child-age-field"> 
      <label>Copil 1</label> 
      <div class="selector validation-field"> 
       <select class="full-width" name="rooms[0][age][]" id='age-1'> 
        <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> 
        <option value="10">10</option> 
        <option value="11">11</option> 
       </select> 
      </div> 
      </div> 
     </div> 
    </div> 
<!-- END --> 

И я клонировать его ниже JQuery:

$(document).ready(function() { 
    //onchange of rooms-count 
    $('#rooms').change(function() { 
     var roomsSelected = $('#rooms option:selected').val(); 
     var roomsDisplayed = $('[id^="room-"]:visible').length; 
     var roomsRendered = $('[id^="room-"]').length; 


     //if room count is greater than number displayed - add or show accordingly 
     if (roomsSelected > roomsDisplayed) { 

      for (var i = 1; i <= roomsSelected; i++) { 
       var r = $('#room-' + i); 
       if (r.length == 0) { 

        var clone = $('#room-1').clone(); //clone 
        clone.children(':first').text("CAMERA " + i); 
        //change ids appropriately 
        setNewID(clone, i); 
        clone.children('div').children('select').each(function() { 
         setNewID($(this), i); 
        }); 
        $(clone).insertAfter($('#room-' + roomsRendered)); 

       } else { 
        //if the room exists and is hidden 
        $(r).show(); 
       } 
      } 

     } else { 
      //else if less than room count selected - hide 
      for (var i = ++roomsSelected; i <= roomsRendered; i++) { 
       $('#room-' + i).hide(); 
      } 
     } 

    }); 

    function setNewID(elem, i) { 
     oldID = elem.attr('id'); 
     newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i; 
     elem.attr('id', newId); 
    } 

}); 

Как я могу изменить JQuery, так что я могу изменить/подсчитывать значения от имени "номера [0] .."

Пример: 2 комнаты выбран

ФИ первый Wrap, чтобы их имя атрибута: rooms[0] Второй компресс дублируется иметь на их имя атрибута: rooms[1] и т.д. JsFiddle можно найти here

Благодарности

Answer 1

Вы можете попробовать

var clone = $('#room-1').clone(); //clone 
clone.children(':first').text("CAMERA " + i); 
//change ids appropriately 
clone.find('[id]').addBack().attr('id', function (_, id) { 
    return id.replace(/\d+$/, i) 
}); 
clone.find('[name]').attr('name', function (_, name) { 
    return name.replace(/rooms\[\d+\]/, 'rooms[' + i + ']') 
}); 

Демонстрация: Fiddle