I'm building a site using CakePHP and am currently working on adding data to two separate tables at the same time.. not a problem.

The problem I have is that I'm looking to dynamically alter the form that accepts the input values, allowing the click of a button/link to add an additional row of form fields.

At the moment I have a table that looks something like this:

<table>
<thead>
    <tr>
        <th>Campus</th>
        <th>Code</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <select id="FulltimeCourseCampusCode0CampusId" name="data[FulltimeCourseCampusCode][0][campus_id]">
                <option value=""></option>
                <option value="1">Evesham</option>
                <option value="2">Malvern</option>
            </select>
        </td>
        <td>
            <input type="text" id="FulltimeCourseCampusCode0CourseCode" name="data[FulltimeCourseCampusCode][0][course_code]">
        </td>
    </tr>
</tbody>

What I need is for the row within the tbody tag to be replicated, with the minor change of having all the zeros (i.e. such as here

FulltimeCourseCampusCode0CampusId

and here

data[FulltimeCourseCampusCode][0][campus_id]

) incremented.

I'm very new to jQuery, having done a few minor bits, but nothing this advanced (mostly just copy/paste stuff).

Can anyone help? Thank you.