Hi, i am a newbie, this is the first time I'm opening a thread here after trying hard and hard by myself to solve a problem, that seems to be a little bit complicated. Any help or any idea to solve this issue would be really appreciatable.

This is what I have right now on my page:


If you click (on checkbox) on any of the four times (one or more), and then click on the button "Add Tag", then you will notice that it will appear on the bottom of the bottom of the table (and also on the right hand side box, but feel free to ignore that part).
Once you click on the "Add Tag", it will display the Tag name (that was checked) and would display something like this -

Portfolio Planner
Existing Sub Tag :


Life Insurance Quote
Existing Sub Tag :

Financial Assessment
Existing Sub Tag :

Now, this works fine upto this position. But then you may notice an input box and a button called "Add Sub Tag". Enter any name on the input button and then pressing the "Add Sub Tag" will bring in some text on the last column of that table. The more you add, the more will be added there.

Now this is what I want -
1. Each row will have "Add Sub Tag" button and input box for each main Tag.
2. After 'users' enter some 'sub tag(s)' for each of the rows, and then after clicking certain check boxes and then click "Add Tag", then the sub tag will appear next to the "Existing Sub Tag".

Example: Open the link (http://javalearner.bravehost.com/lesson1.html), type in "insuranceA" on the input box, then click on "Add Sub Tag" button ... insuranceA will then appear on the 3rd column. Now click the checkbox next to "Life Insurance Quote" and then click "Add Tag" button; and it will give the following result:
Life Insurance Quote
Existing Sub Tag : insuranceA

Thanks in advance.