CODEWITHSUNDEEP
jquery
Optiq
Optiq

Reputation: 3182

How to get .text() to work with .clone() sequentially

I've been modifying a snippet for cloning the Customer Profile section of my questionnaire. at the top of the section I have a div set up as a title which is

<div class="sub_title04" id="cus_title">Customer 01</div>

the JQuery snippet I'm calling it up in is

$("#p20_01_yes").click(function(){
var num = $('.clone_el').length,
newNum = new Number(num + 1),
clonedFieldset = $("#cloner").clone().appendTo("#page20");

clonedFieldset.attr('id',('cloner')+newNum).find("input, textarea, select, label, #cus_title").each(function() {
    var item = $(this);

    item.attr('name', item.attr('name') +newNum).attr('id', item.attr('id') +newNum);
    $('#cus_title').text("Customer 0"+newNum);
});
});

this bit

$('#cus_title').text("Customer 0"+newNum);

is set to integer the title so it goes "Customer 01, Customer 02, Customer 03" etc. etc. it works, but not in the manner intended. What happens is the first title updates and the duplicates follow.

For example, if I duplicate it 7 times, from the top of the Page down the titles go "Customer 07, Customer 01, Customer 02, Customer 03, Customer 04, Customer 05, Customer 06" rather than just staying in order.

How can I get it to clone in order?

Upvotes: 1

Views: 23

Answers (1)

Schahriar SaffarShargh
Schahriar SaffarShargh

Reputation: 1971

Try prepending the clone to the parent

$("#p20_01_yes").click(function(){
var num = $('.clone_el').length,
newNum = new Number(num + 1),
clonedFieldset = $("#cloner").clone().prependTo("#page20"); // <- here

clonedFieldset.attr('id',('cloner')+newNum).find("input, textarea, select, label, #cus_title").each(function() {
    var item = $(this);

    item.attr('name', item.attr('name') +newNum).attr('id', item.attr('id') +newNum);
    $('#cus_title').text("Customer 0"+newNum);
});
});

This reverses the order which I am guessing is what you are trying to achieve.

Upvotes: 1

Related Questions