title: jQuery is doubling my cloning everytime I click a link to clone html?
body: <p>The following html snippet contains an input, a select and a link. When I click the link, I want to basically clone line, I want the new line to be appended to the last line. I also would like the link to be removed and be added to the last line.  I want to have the even carried over as well.  I will put my jquery code below the html. </p>
  
  <pre><code>&lt;div id="lines"&gt;
      &lt;div class="line"&gt;
          &lt;span&gt;Value&lt;/span&gt;&lt;input type="text" name="value" class="value"/&gt;
          &lt;span&gt;Type&lt;/span&gt;
          &lt;select name="type" class="type"&gt;
          &lt;option&gt;$&lt;/option&gt;
      &lt;option&gt;%&lt;/option&gt;
      &lt;/select&gt;
          &lt;a id="addLine" href="#"&gt;Add&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  $(document).ready(function() {
  $('#addLine').click(function() {
  
         $('.line').clone({withDataAndEvents:true}).appendTo('#lines');
  
      });
  });
  </code></pre>
  
  <p>When I click add, it first adds a second line below the first one, but then when I click add again, it adds 2 lines, so I have 4, every time I click add, it is doubling the amount of lines which is what I don't want.  I also want add removed from all the lines except the last one.  I probably will have a Remove as well to remove a specific line, so I would like suggestions on how to handle this.</p>