jQuery is doubling my cloning everytime I click a link to clone html?
<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>
