Question

I have a row of text boxes , I have a function to clone them based on what number comes into the function. So if there are going to be 4 users then I want the row to clone 4 times to enter the information of the 4 users. But I also want some way to be able to submit this form , I am having trouble figuring out how to give each row a unique class or id for each text box so I can read through them when submitting.

I was thinking adding “1” to each class (or id) to everything in the first row, then “2” to everything in the second. But I am not too sure as to how to do this. I have an example Here In jsFiddle , Since I have tried to add the for loop and clone a certain amount of times , now the clone isn’t even working at all- If anyone has any suggestions , it would really help me out.

<div class="RegisterContainer">
  <div class="RegisterHead"><a>Register Attendees</a></div>
    <div class="placenewrows"></div>
</div>
<br />
<input type="button" onclick="fnCloneTemplate({'number' : '3'});" value="make 3 rows">

<div class="_template">
  <a class="left1">First Name:</a>
  <a class="left2"></a><a class="left2">Last Name:</a>
  <a class="left3">Phone #</a><a class="left4">Email:</a>
  <a class="left5">Optional Comment</a><br />
  <input type="text" class="tFirstName left1"/>
  <input type="text" class="tLastName left2"/>
  <div class="phonenumberbox left3">
    <input type="text" class="first3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="next3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="last4digits" maxlength="4" />
 </div>                                                                                              <input type="text" class="tEmail left4"/>   

function fnCloneTemplate(x){
    var NumofClones = (x.number * 1);
    for(i=0; i <= NumofClones; i++)
    {
       var newrow = $('._template').clone().removeclass('_template');
        $('.placenewrows').append(newrow);
    }    
}

​

Answer 1

You can change your function like below, to avoid multiple time cloning.

function fnCloneTemplate(e){
    var NumofClones = (e.data.number * 1),
        newrow= $('._template').clone().removeClass('_template'); // in your code
                                                                  // removeClass spelling
                                                                  // mistaken
    for (i=0; i<NumofClones; i++)
    {
        $('.placenewrows').append(newrow);
    }    
}

Using on():

HTML

<input type="button"value="make 3 rows" id="make_clone">

jQuery

function fnCloneTemplate(e){
    var NumofClones = (e.data.number * 1),
        newrow= $('._template').clone().removeClass('_template');
    for (i=0; i<NumofClones; i++)
    {
        $('.placenewrows').append(newrow);
    }    
}

$('#make_clone').on('click',{'number' : '3'}, fnCloneTemplate);

THE DEMO

Full Code for clone and unique class

function fnCloneTemplate(x) {
    var NumofClones = (x.data.number * 1),
        clone = $('._template').clone().removeClass('_template');
    for (i = 0; i <= NumofClones; i++) {
        var newrow =    clone
                        .find('input[type=text]')
                        .attr('class', function(i, oldClass) {                             
                                return oldClass.replace(/\d/, function(char) {
                                    return +char + i ;
                                });
                                return newClass
                            })
                        .end();
        $('.placenewrows').append(newrow);
    }
}