How do I Add Distinctive Blocks of Form Controls Using jQuery?
<p>I am doing a small human resource web application in my workplace and i have a CV section were employees can add their CVs to be displayed to the human resource manager.</p>

<p>I want to make something similar to what <a href="http://careers.stackoverflow.com/" rel="nofollow">Stackoverflow Careers</a> has done in the <strong>Experience</strong> and <strong>Education</strong> sections where the users can click the "<strong>add more experience</strong>" or "<strong>add more education</strong>" links for new form elements to appear and a <strong>remove</strong>, <strong>move up</strong> and/or <strong>move down</strong> links appear.</p>

<p>I think that this was possible using jQuery and either the <strong>append</strong> or <strong>appendTo</strong> functions. That's as much as I know about jQuery and have no idea on how to go about implementing that.</p>

<p>The solution that i require should:</p>

<ul>
<li>Enable me to add a template one for
the Experience section and the other
for Education</li>
<li>On the loading of the page at least
one education section and one
Experience section appears on the
form</li>
<li>Form controls must have an
identifying value added to them to
distinct them from other sections.
For instance, when the page first
appears each form control should end
with 0, when the <strong>add more</strong> button
is clicked, each form control's name
should end with 1, and so on.</li>
<li>Some sort of validaion</li>
</ul>

<p>I am using ASP.NET WebForms if such information is needed.</p>

<p>Thanks,,</p>
