What's the best way for the user to add multiple details to single area of input?

In my project the user has to detail his management expenses in four different areas. At first we had a simple table (this one) where he had to write all the data grouping all the expenses description in a textarea, now we want him to detail each area, so i have to give the user the possibility to add "rows" to each area. That means that if his "Impegni" expenses consists of three entries he must enter three "rows".

My idea is to use jquery to let the user add rows and modify the rowspan of the first column when the user adds/remove a row (that is, if you need to enter another row for "Impegni" i create a new row under the third row and add "colspan=2" to the "impegni" cell) but maybe there is a better way to handle this kind of input.

I try to explain it even better: the four rows that are present in my table are the "master" areas and the user must add details to those areas. Creating new "sub-rows" for each area it's an idea, but maybe there is a better way to handle it!

EDIT - another idea is to have four diffe开发者_如何学编程rent tables (one for each one of the "master" rows) and show hide them with tabs (look at example five on this page) but i don't know how to handle the sum of all the rows

What do you suggest?

My friend has made a plugin for it, you can look here.

I think jquery is the best way, you can access your database with simple ajax command from jquery, like .load() :)