Clone div and rename element ids incrementally

Question

Ok lets say I have div with form elements inside of it. I want to be able to clone that div with a button click using jQuery and add a version 2 of the form, so ALL of the element IDs will increment by 1 in their name.

<div id="card">
    <!-- PART 1 --> 
    <h1 class="card_build">Build your card options:</h1>

    <select id="country" name="country[]">
        <?php
            include('lib/class_dbcon.php');
            $connect = new doConnect();

            $q = mysql_query("SELECT * FROM country ORDER BY country_id ASC");
            while($row = mysql_fetch_assoc($q))
            {
                echo '<option value="'.$row['country_id'].'">'.$row['country_option'].'</option>';
            }
        ?>
    </select>

    <select id="filter" name="filter[]">
        <option value="">-- Select Filter --</option>
    </select>

    <select id="load_choice" name="load_choice[]">
        <option value="">-- Select Load_choice --</option>
    </select>

    <select id="plastic" name="plastic[]">
        <option value="">-- Select Plastic --</option>
    </select>

    <select id="UG_tipping" name="UG_tipping[]">
        <option value="">-- Select UG/Tipping --</option>
    </select>
    <!-- PART 1 -->
    <!-- PART 2 -->
    <div id="part2" style="margin-top:10px;">
    <h1 class="card_build">Customize the card:</h1>
    <input type="text" name="3rdLine" size="32" class="field" id="3rdLine">
    <input type="text" name="4thLine" size="32" class="field" id="4thLine">
    <input type="text" name="card_value" size="32" class="field" id="card_value">
    <label for="showpoints">Show "Points"?</label>
    <input type="checkbox" value="points" class="checkbox" checked="checked">
    <label for="cobrand">Co-branded?</label>
    <input type="checkbox" value="cobrand" class="checkbox" checked="checked">
    <textarea rows="5" name="message" class="textarea" id="message"></textarea>
    <hr>
    </div>
    <!-- PART 2 -->
</div>
    <a href="#" onCLick="moreFields()">ADD</a>

So if you look at this code and you were to click the ADD link at the end it would duplicate and turn it into and do the same thing to all of the element IDs inside the div as well. One wrench in the works is that I want a MAXIMUM of 5 clones, so the script can only increment 4 times (or 5 it doesn't really matter, as long as I can see a method to create a maximum).

My only other question is, will the PHP injection remain in tact when a div is cloned? Thanks in advance, I've been wracking my brain all night on this one.

Answer 1

From your code I think your main problem is accessing the group of dropdowns uniquely without conflict. If this is the case, I think that could be achieved without the stress of incrementing the id's of each element for every group created. If I were to do this, I would approach it as follows.

First the DOM (an example):

<div id="card">
    <div class="group">
        <select id="country" name="country[]">
            <option>select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <select id="filter" name="filter[]">
            <option>select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
</div>
<a id="more" href="">More</a>

Then the jquery:

$(function(){
    var newgroup = $('<div>').addClass('group');
    $('#more').click(function(e){
        e.preventDefault();
        $('.group').first().clone().appendTo(newgroup).appendTo('#card');
    });

    $('.group #country').live('change',function(){
        $(this).parent().find('#filter').val(1);
    });
});