Cloning doubling up

Cloning doubling up

I am trying to add a row of HTML to a div whenever a button is clicked. I am using the following code:
  1. $(function(){
  2.   $('#add-item').click(function(){
  3.     $('#item-to-add').clone().appendTo('#item-container');
  4.   });
  5. });
This works perfectly the first time the button is clicked. Unfortunately, subsequent clicks result in a doubling of rows added (e.g. 1, 2, 4, 8, etc.) which is definitely not what I need. I tried creating a variable of the clone outside of the click event like so:
  1. $(function(){
  2.   var new-item = $('#item-to-add').clone();
  3.   $('#add-item').click(function(){
  4.     $(new-item).appendTo('#item-container');
  5.   });
  6. });
but that didn't work. How do I reset the wrapped set to contain only the original item? What is the best way to accomplish this?