How to generate Divs containing tables with dynamically addable and removable rows? - JSfiddle Added

Question

In the JSFiddle, I am trying to generate divs dynamically using javascript. Those divs will contain tables where the last two rows can be incremented using the add button.

I have tried the code in the fiddle. The ins_row() function is used to add rows in the table which are generated within the divs.

The addEvent() function is used to generate divs

When the Add product button is clicked a div containing a table with one row will get generated.

When the add button is clicked the last two rows should keep on getting added as per the clicks. If the remove button straight to the div is clicked the whole table and div should be deleted.

When the remove button straight to the generated rows is clicked, only that row should be deleted and not the whole div.

Problem

The problem here is the divs with table are getting generated but I couldn't figure out how to add the rows in the table.

See it in action here

Expected output

Note: I have just pasted the external JS file into the javascript column of the above fiddle as I don't have the resource link.

Present output

I hope I have presented the question understandable, if anything is not clear, Please let me know

Answer 1

I believe I have properly understood your requirement.
Try out this fiddle http://jsfiddle.net/Kucuk/14/

It uses jquery though - its just a sample sort of thing that you could probably base your own code off. Its all doable in plain old JavaScript, if that's what you prefer. The styling is a bit off, but that you can handle I hope.

Do let me know if this helps you in some manner.