Cloning a set of elements and form fields - Jquery

I have a table with various elements that I need to have cloned on click. I am trying to do this using jQuery. I have attached an image.

The first top part where Ingredients are on the "add more" link that  WHOLE section including the button part in the gray box would be cloned.

Then the last piece would be the GRAY part below, each time you clicked add more to the right, another box would appear below.

I have tried various methods and its becoming a mess and am sure there is a better way, performance wise to do this. I have my code here:

 
<table border="0" width="600" class="pga_toggle_ingredients">
                <tbody><tr height="15">
                    <th width="60" scope="col">Ingredient Name</th>
                    <th scope="col">Qty</th>
                    <th scope="col">UOM</th>
                    <th width="70" scope="col">% Ingredient</th>
                    <th scope="col"></th>
                </tr>
                <tr height="15">
                    <td width="80"><img class="pgaDeleteIcon" alt="Delete" src="/Images/icon_delete.gif">
                        <input type="text" value="ing1" id="" name="" maxlength="50" class="{alphanum:true} pgaInputName valid"></td>
                    <td width="30"><input type="text" value="100" id="" name="" class="{digits:true} pgaInput valid"></td>
                    <td width="40"><input type="text" value="KG" id="" name="" class="pgaInput valid"></td>
                    <td width="56"><input type="text" value="0" id="" name="" maxlength="3" class="{digits:true} pgaInput valid"></td>
                    <td width="96"><a class="pga_add_ingredient" href="#">Add More</a></td>
                </tr>
                <tr class="pga_toggle_component" id="pga_ingredient_comp_no_0">
                    <td colspan="6"><h4>Related Components</h4>
                        <table border="0" width="429" class="pga_table_component">
                            <tbody><tr>
                                <th scope="col">Genus Name</th>
                                <th scope="col">Species Name</th>
                                <th scope="col">Type Code</th>
                                <th scope="col">Country</th>
                                <th></th>
                            </tr>
                            <tr>
                                <td><img class="pgaDeleteIcon" alt="Delete" src="/Images/icon_delete.gif">
                                    <input type="text" value="gen1" id="" name="" class="pgaInputName valid"></td>
                                <td><input type="text" value="spec1" id="" name="" class="{alphanum:true} pgaInputName valid" maxlength="25"></td>
                                <td><input type="text" value="HRV" id="" name="" class="{alphanum:true} pgaInput" maxlength="25"></td>
                                <td><input type="text" value="CA" id="" name="" class="pgaInput"></td>
                                <td><a class="pga_add_ingredient" href="#">Add More</a></td>
                            </tr>
                        </tbody></table></td>
                </tr>
            </tbody></table>

Open in new window


Thanks!

 Cloning
LVL 1
catonthecouchproductionsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SRigneyCommented:
When cloning this much at once, I find it easiest to have a hidden template on the page.  Then when the link is clicked a new copy of the template is inserted into the location in relation to the clicked link.  Otherwise you have to deal with removing data from the page.    You could build the template completely in script if you want, but I've used hidden fields.  In order to keep the hidden fields from messing up the array of inputs that are submitted I hide them outside the form, so they are not included in the serialized data.

In order to get the location of where the clicked link is will use the .parent() method on the obect.

$("a.pga_add_ingredient").click( function() {
  // get the row, which is 2 parents above the link clicked.
  ingredient = $(this).parent().parent();  
  // get the details which is the next row (sibling) of the ingredients.
  detail = ingredient.siblings(0);

  data = // clone template
  detail.after(data) // insert the clone after the detail line.
     
});

I'd do the same thing for the details that you have, only I'd give it a different class name because it needs to clone a different object, and it is at a different parent depth that it needs to insert.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.