html form input - multiple answers for each input field - html

Question

I'm not sure exactly how to word this question, but I'll do my best.
I have a form which collects data about employment history from users. At the moment my form looks like this:
<form name="EmploymentHistory" action="Form E.php" method="post">
<h2>Employment History</h2>
<label>Last/Current employer</label>
<input type='text' name='LastCurrentemployer'>
<hr> <label>Position</label>
<input type='text' name='Position'>
<hr> <label>Date Started</label>
<input type='text' name='DateStarted'>
<hr> <label>Date Finished</label>
<input type='text' name ='DateFinished'>
<hr> <label>Supervised by</label>
<input type='text' name = 'Supervisedby'>
<hr> <label>Contact Details for Boss</label>
<input type='text' name='ContactDetailsForBoss'>
<hr> <button type='button'>Add another job</button> <br>
<hr> <input type="submit" value="Next">
</form>
My problem is that the "Add another job" button does nothing.
How can I enable a user to enter multiple jobs into their employment history so that each job is entered as a new record in my database, but the submit button (next) will only need to be hit once?
I was thinking about trying to set an array to then using arraypush to add each entry, eg:
$pastemployers = array ();
arraypush $pastemployers(POST_['LastCurrentemployer']);
then a loop to add each one as a new record, eg:
for ($x = 0; $x < count(pastemployers); $x++){
echo "<input name='pastemployers" . $x . "' value='" . $pastemployers[$x] . "'> </input>";
I'm sure there's a better way to do this, but I can't find the answer online or work it out. Most of my searches are returning results about checkboxes or multiple submit buttons (not helpful to me). Please help

Answer 1

First of all alter your form as below and use addAnotherJob() to create clone of first span (using jQuery) and change id of each form field.On submitting this form you will get array of employer details.
<form name="EmploymentHistory" action="Form.php" method="post">
<h2>Employment History</h2>
<span class="span_clone">
<label>Last/Current employer</label>
<input type='text' id='LastCurrentemployer_0' name='LastCurrentemployer[]'>
<hr> <label>Position</label>
<input type='text' id='Position_0' name='Position[]'>
<hr> <label>Date Started</label>
<input type='text' id="DateStarted_0" name='DateStarted[]'>
<hr> <label>Date Finished</label>
<input type='text' id='DateFinished_0' name ='DateFinished[]'>
<hr> <label>Supervised by</label>
<input type='text' id='Supervisedby_0' name = 'Supervisedby[]'>
<hr> <label>Contact Details for Boss</label>
<input type='text' id='ContactDetailsForBoss_0' name='ContactDetailsForBoss[]'>
<hr> <button id='add-another-job-0' type='button' onclick= 'addAnotherJob()'>Add another job</button> <br>
</span>
<hr> <input type="submit" value="Next">
</form>
Please refer this link : http://jsfiddle.net/ambiguous/LAECx/