I try to change the identifier of my elements when I clone an element, basically I keep a counter that I increment and add it at the end of the identifier every time it is cloned. It seems simple enough.
var addAnswerFlag = true;
function addAnswer(button)
{
if(addAnswerFlag)
{
addAnswerFlag = false;
$('#answer_warning').fadeOut(600);
$('.template').clone().attr('id','').insertAfter($('.template')).fadeIn(300, function() {
$(this).removeClass('template');
addAnswerFlag = true;
$('.answer_li:not(.template)').each(function(index){
++index;
$(this).children('.answer').each(function(){
$(this).attr('id', $(this).attr('id').replace("__", "_"+index+"_")).attr('name',$(this).attr('name').replace("__", "_"+index+"_"));
});
});
});
}
}
Sorry if my code is a bit unclear.
Basically, my first loop goes through all my list items (except the dummy data template) and takes each “.answer” and replaces the double underscore “__” with “i”, where I am the counter.
For some reason, dang I am always 1. I know the increment values for each element of the list, because if I warn its value before and after trying to reassign the id, the value increases, but in the actual destination it is always 1.
. :)
Edit:
HTML. , :
<ul id="answers">
<li style="" class="answer_li template">
<input id="question__en" name="question_[en]" class="answer" value="" type="text">
<input id="question__fr" name="question_[fr]" class="answer" value="" type="text">
</li>
<li id="" style="display: list-item;" class="answer_li">
<input id="question_1_en" name="question_[en]" class="answer" value="" type="text">
<input id="question_1_fr" name="question_[fr]" class="answer" value="" type="text">
</li>
</ul>
, - , - , . , , . , , , , , javascript, , - , :)
javascript, , ( ).