Adding incrementing numbers to select box name attr on duplication in jquery

Question

I am taking the amount from one select box and duplicating a div that number of times. But I have run into a problem. I need the new divs (which contain select boxes) to change their name. I need it to add the incrementing number to the end of the select box name. Here is my JSFIDDLE: http://jsfiddle.net/liveandream/DhCLK/

JQUERY:

//NUMERATE SELECT
for (var i = 2; i < 5; i++) { // add counts in a for loop
    $('select[name="rooms"]').append('<option value=' + i + '>' + i + '</option>');
}
//#

//DUPLICATE PLUGIN
$.fn.duplicate = function(count, cloneEvents) {
    var tmp = [];
    for (var i = 0; i < count; i++) {
        $.merge(tmp, this.clone(cloneEvents).get());
    }
    return this.pushStack(tmp);
};

//SELECT CHANGE FUNCTION (on change get value and clone)
$('select[name="rooms"]').change(function(){  // on change...
    var numOfClones = $(this).val() -1;    // get value...
    $('#holder').html('');              // empty holder if there are some old clones
    $('.repeat').duplicate(numOfClones).addClass('new').appendTo('#holder')
     .find("select").each(function() {
                   this.name = this.name.replace(/\d+/, 2);
               });

// duplicate; fill holder with new clones; the class 'new' is just for styling
});
e.preventDefault();​

HTML:

<select name="rooms">
        <option>1</option>
</select>

<div class="repeat">
    <h4 style="font-size: 11px;">Adults (17+)</h4>
      <select name="adults">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
       </select>
    <h4 style="font-size: 11px;">Children</h4>
        <select name="children" id="children">
        <option selected="selected">0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        </select>

        <h4 style="font-size: 11px;">Child AGES</h4>
        <select name="ages" id="ages" style="display: none;">
        <option selected="selected">-?-</option>
        <option>>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        </select>
</div>

<div id="holder"></div>

I hope someone could help me with this... Thank you in advance! ​

Answer 1

You can change the clone code to add a number to the end of each select in each repeat div. You also need to fix the id values to be unique which I added to this code too. To get the same number added to each select within a given repeat div, I had to add another .each() loop so we could manually increment the counter at the right time.

//SELECT CHANGE FUNCTION (on change get value and clone)
$('select[name="rooms"]').change(function(){  // on change...
    var numOfClones = $(this).val() -1;    // get value...
    var cntr = 2;
    $('#holder').empty();              // empty holder if there are some old clones
    $('.repeat').duplicate(numOfClones).addClass('new').appendTo('#holder').each(function() {
        $(this).find("select").each(function() {
            if (this.name) {
                this.name += cntr;
            }
            if (this.id) {
                this.id += cntr;
            }
        });
        ++cntr;
    });
// duplicate; fill holder with new clones; the class 'new' is just for styling
});

This code works because the master copy has no number at the end. If it did have a number at the end, then you could do a replace operation on that number.

Working demo: http://jsfiddle.net/jfriend00/hhUaR/