Can't change the ID of my elements
<p>I'm trying to change the id of my elements when I clone an element, basically I keep a counter that I increment and add it at the end of the id each time it's cloned. Seems simple enough.</p>

<pre><code>var addAnswerFlag = true;
function addAnswer(button)
{
    //flag to keep clicks from chaining
    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+"_"));         
                });

            });

        });

    }
}
</code></pre>

<p>Sorry if my code is a little unclear. </p>

<p>Basically my first loop goes through all my list elements (except for the template one with dummy data) and takes each '.answer' and replaces the double underscore "__" for "<em>i</em>" where i is a counter. </p>

<p>For some dang reason i is always 1. I know the value increments for each list item because if I alert its value before and after I attempt the reassigning of the id the value goes up but in the actual assignment it is always 1.</p>

<p>This is where I get extremely confused. Any help would be appreciated :)</p>

<p>Edit:</p>

<p>Here's some HTML. Basically I'm looping through my list items here and changing the IDs and names of my inputs so I can handle them once they are submitted:</p>

<pre><code>&lt;ul id="answers"&gt;
    &lt;li style="" class="answer_li template"&gt;
        &lt;input id="question__en" name="question_[en]" class="answer" value="" type="text"&gt;
        &lt;input id="question__fr" name="question_[fr]" class="answer" value="" type="text"&gt;              
    &lt;/li&gt;
    &lt;li id="" style="display: list-item;" class="answer_li"&gt;
        &lt;input id="question_1_en" name="question_[en]" class="answer" value="" type="text"&gt;
        &lt;input id="question_1_fr" name="question_[fr]" class="answer" value="" type="text"&gt;             
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>As you can see the first one is my template and the second has the index added between the underscores. However as I clone the template they all get the same index. I really don't understand because if I alert the value it's incremented correctly, I was so confused that I went back into basic javascript tutorial to see if I was missing some sort of operator that I was using by accident :)</p>

<p>I also posted the whole javascript function that gets called when I click on a button (which I pass as a parameter).</p>
