HTML forms, add area on click - php

Question

I'm not sure how to ask what I'm looking for to search how-tos. I am building a form and one of the entries requires users to list an appliance, its voltage, watts, amps, phase, etc.
I'd like a simple row with "X" columns providing the text areas for one appliance and then the ability to click a link to 'add another appliance' using jquery/html.
I like using placeholder text to save space on the page. I can get all this set up just fine for a single entry like 'name' however I don't know how to implement an 'add entry' row. All of the data is stored via PHP in MySQL.
So A: What is the name of this type of form section. B: What is it called when we want to let the user add a row to this section?
I love making things harder than they really are. It's my specialty. I guess :)
EDIT: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
Using this format with 5 columns per entry (though it will all be on one line/row) I'd like to have an "add entry" link which generates a new blank entry option.
#elecNeeds input[type=text], textarea {
font-size: 12px;
font-style: italic;
width: 15%;
height: 20px;
padding: 10px;
color: #212323;
background: #E3E3E3;
background: rgba(255, 255, 255, 0.5);
border: 2px #000 solid;
margin-bottom: 10px;
position: relative;
behavior: url(/js/PIE.htc);
}
<div id="elecNeeds">
<input type="text" name="appliance" placeholder="Type of Equipment">
<input type="text" name="voltage" placeholder="Voltage">
<input type="text" name="watts" placeholder="Watts">
<input type="text" name="amps" placeholder="Phase">
<input type="text" name="notes" placeholder="Notes">
<br /> Add an appliance
</div>

Answer 1

I don't know what's it called, but you probably want this - http://jsfiddle.net/uPWkf/1/
<form method="post" action="#" id="myForm">
<div id="nameFields">
<label>Watt <input type="text" name="watt0" /></label>
<label>Volt <input type="text" name="volt0" /></label>
<label>Amp <input type="text" name="amp0" /></label><br/><br />
</div>
<input type="submit" value="submit" id="submit" />
</form>
Add New Row
and the JS
var i = 1;
$("#addRow").click(function() {
$("#nameFields").append('<label>Watt <input type="text" name="watt' + i + '" /></label><label>Volt <input type="text" name="volt' + i + '" /></label><label>Amp <input type="text" name="amp' + i + '" /></label><br/><br />');
i++;
});
$('#myForm').submit(function() {
var values = $('#myForm').serialize();
alert(values);
});

Answer 2

I think You need to use $(selector).append('<code>'); function. For example:
Add
<table class="my_fuits">
<tr>
<td>Fruit</td>
<td><input type="text" name="fuits[]" /></td>
</tr>
</table>
and js(jQuery) code:
$(document).ready(function(){
// add one more row
$(".add").live('click',function(){
$(".my_fuits").append('<tr><td>Fruit '+$(".my_fruits input").length+'</td><td><input type="text" name="fuits[]" />[X]</td></tr>');
return false;
});
// remove row
$(".remove").live('click',function(){
$(this).parent().parent().remove();
return false;
});
});