On click, clone element to variable and append it to another element

Question

I have a form and I would like to set it up so that when a user enters/selects values into the inputs and clicks the "Add" button, it will clone each of the inputs/select boxes, assign them to a variable and then append them to another element below. What i have currently is just returning [object Object] instead of cloning the elements. Where am I going wrong?

 $(function() { $('button').click(function() { var $name = $('#name').clone(), $email = $('#email').clone(), $package = $('#package').clone(), $newRow = '<div class="name">' + $name + '</div><div class="email">' + $email + '</div><div class="package">' + $package + '</div>'; $('.row').append($newRow); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div> 

Answer 1

You just need to append the cloned objects.

 $(function() { $('button').click(function() { var $name = $('#name').clone(), $email = $('#email').clone(), $package = $('#package').clone(); $('.row').append($name); $('.row').append($email); $('.row').append($package); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div> 

Answer 2

Append each cloned element to its own div. Then append all divs into the row.

Due to a bug , you must force value on the cloned select box

 $(function() { $('button').click(function() { var $name = $('<div class="name"></div>').append($('#name').clone()), $email = $('<div class="email"></div>').append($('#email').clone()), $package = $('<div class="package"></div>').append($('#package').clone()); $package.find('#package').val($('#package').val()); $('.row').append($name, $email, $package); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div> 

---

One last thing. You shouldn't be recognizing elements by id= as those are meant to be unique per whole page. Try rewriting your code so you could use classes for selectors. For example:

<input class="i_name" />
...
$('.i_name').clone()

Answer 3

I don't fully understand what do you need but clone return an object that's why appending to a string will return into a [object Object]. Perhaps you could use outerHTML.

 $(function() { $('button').click(function() { var $name = $('#name').clone(); $email = $('#email').clone(); $package = $('#package').clone(); $newRow = '<div class="name">' + $name[0].outerHTML + '</div><div class="email">' + $email[0].outerHTML + '</div><div class="package">' + $package[0].outerHTML + '</div>'; $('.row').append($newRow); }); }); 

 .row { display:table-row; } .row > div { display:table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" /> <input id="email" /> <select id="package"> <option value="one">Package One</option> <option value="two">Package Two</option> <option value="three">Package Three</option> </select> <button>ADD ROW</button> <div class="row"> </div>