jquery nested cloning

Hello,
I am extremely new to jquery and I've been doing a lot of research in trying to clone a nested fieldset, at least I think that's what its called.
I have a very simple form that has the following:
AREA - input box
Details
====================================
SIZE Quantity Price
====================================
input box input box input box
I want to be able to add some controls that can do the following, one would be to be able to add more details within that area, so lets say I wanted to add 3 more fields to details it would look like this:
AREA - input box
Details
====================================
SIZE Quantity Price
====================================
input box input box input box
input box input box input box Delete
input box input box input box Delete
input box input box input box Delete
And then if I wanted to add a new area it would look something like this:
AREA - input box
Details
====================================
SIZE Quantity Price
====================================
input box input box input box
input box input box input box Delete
input box input box input box Delete
input box input box input box Delete
AREA - input box Delete Area
Details
====================================
SIZE Quantity Price
====================================
input box input box input box
Does anyone have any simple way of doing this? I have found a few plugins like sheepit and some other ones, but they are very complicated to use and to modify to fit for what I want to do.
Any help would be very much appreciated

 

Extremely confusing, but you want to be able to add (and delete?) separate lines of input boxes for SIZE / Quantity / Price (each on its own line), and a complete new set (AREA and all the rest)?
So, basically, what you want is adding the following:

<input type="text" name="size_VAR"><input type="text" name="quantity_VAR"><input type="text" name="price_VAR">

Code (markup):

right before either the end of a fieldset, or the form itself?
That's fairly simple, something like:

$(function() {
  $('.click_to_add_input').click(function() {
    $('#id_of_form_or_fieldset').append('<input-code goes here>');
  })
  // here you can add functionality for deleting, and of course, if you add another button to add a complete secondary form/fieldset, you can do that within the anonymous function as well
})

Code (markup):

This is pseudo-code, and can't be copied verbatim, but should give you an idea.

 

Yeah, I'm not quite following what it is you're trying to do -- the description is just a confusing mess; could you show us that as MARKUP, in particular what you're trying to copy?

Generally speaking though, if all you are trying to do is clone a fieldset why are you wasting time even having any jQuery asshattery on the page? Node.cloneNode() sounds like what you want. Just appendChild (or insertBefore) a cloned copy.

It's probably also then walk the DOM to empty out the clone's values.