Cloning a form div

[hargi]

looking for some help here.
Can only use PHP and javaScript, JQuery for this solution.

I have a form that takes in customer name and address I need the ability to add unlimited customers to this form. eg

<?php
$customers = NULL // A collection of customers passed through the controller
    foreach($customers as $customer){
    <div>     
        <label for="customer_<?php echo $i ?>_forename">Customer Forename:</label>
        <input type='text' id="customer_<?php echo $i ?>_forename" name='cust[<?php echo $i ?>][forename]' value="<?php echo $customer->forename; ?>" />
    </div>
}
?>

I need a button that I can click that will render a new form section for the new customer details. so that would basically output

<div>     
        <label for="customer_<?php echo $i+1 ?>_forename">Customer Forename:</label>
        <input type='text' id="customer_<?php echo $i+1 ?>_forename" name='cust[<?php echo $i+1 ?>][forename]' value="<?php echo $customer->forename; ?>" />
    </div>

Any tips on how to do this or what I should be googling?

Thanks

 

[hargi]

Thanks I have it working in a fashion

it produces things like this

<p class="clearfix">
                <label for="cust_2_fname">Customer Forename:</label>
                <input type="text" id="cust_2_fname" name="cust[2][fname]" value="Peter" class="">
                <img src="/assets/admin-icons/nc-b.png" class="" rel="secondary_cust_2_fname_box" width="15px">
            </p>

in my js i have these

var $presentId = $div.attr("id");
var num = parseInt( $div.attr("id").match(/\d+/g), 10 ) +1;
var $nextCustomer = $div.clone().attr('id', 'customer_details_'+num );
    //clear textboxes
    $nextCustomer.find("input:text").val("");

I need to update my name attr [2] to be [3] and id's from _2_ to be _3_

Something like
$nextCustomer.find("input[name^='cust[$presentId]'").attr('name', 'cust[num]'); // but this isnt working