Which way is better in duplicating html elements through jquery
<p>I have a form like this:</p>

<pre><code>&lt;form:form name="ExpenseDetails" method="Post"
    action="ExpenseDetailsForm.html"&gt;
    &lt;table id="Parent1_Table"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;table id="Item1_Table1"&gt;
                        &lt;tbody&gt;
                            &lt;tr&gt;
                                &lt;td&gt;Item&lt;/td&gt;
                                &lt;td&gt;&lt;input type="text" name="Item1" id="Item1" required /&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;Expense in Rs&lt;/td&gt;
                                &lt;td&gt;&lt;input type="text" name="ItemValue1" id="ItemValue1"&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;table id="Item1_Table2"&gt;
                        &lt;tbody&gt;
                            &lt;tr&gt;
                                &lt;td&gt;&lt;button name="Edit1" id="Edit1"&gt;Edit&lt;/button&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;button name="Duplicate1" id="Duplicate1"&gt;Duplicate&lt;/button&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;button name="Trash1" id="Trash1"&gt;Trash&lt;/button&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/form:form&gt;
</code></pre>

<p>On clicking the <code>duplicate1</code> button, I want to create another <code>table</code> with same elements as that of <code>Parent1_Table</code> and append it.   </p>

<p>For doing this I have 2 solutions in mind:</p>

<p>1) Find the table in which the clicked <code>duplicate button</code> is located,<br>
Get all the <code>id</code> of the elements and push it a stack,<br>
Get the whole html of the table,<br>
Replicate the whole <code>table</code> element and append to the original after incrementing the <code>ids</code> by 1.</p>

<p>2) Create the same elements invariable of the <code>i</code> of the <code>duplicate</code> button clicked,<br>
After submission, count the no: of text elements and use them.</p>

<p>Which of the above solutions is to easy develop?<br>
Can anyone please help me choose one among these?<br>
Please let me know if you need more details on the question.</p>
