JQuery not removing added element
<p>What I want to do is add and remove list items. I have got it to add new items to the list and I can remove existing ones but not the ones that have been added. It seem like it would work but it doesn't. Any help would be appreciated! Here the code: </p>

<p><strong>JQuery:</strong></p>

<pre><code>&lt;script  type="text/javascript"&gt;
$(function(){
    $('a#add').click(function(){
        $('&lt;li&gt;&lt;a href="#" id="remove"&gt;--&lt;/a&gt;List item&lt;/li&gt;').appendTo('ul#list');
    });

    $('a#remove').click(function(){ 
        $(this).parent().remove();
    });
});
&lt;/script&gt;
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;a href="#" id="add"&gt;Add List Item&lt;/a&gt;
&lt;ul id="list"&gt;
&lt;li&gt;&lt;a href="#" id="remove"&gt;--&lt;/a&gt; List item&lt;/li&gt;
&lt;li&gt;&lt;a href="#" id="remove"&gt;--&lt;/a&gt; List item&lt;/li&gt;
&lt;li&gt;&lt;a href="#" id="remove"&gt;--&lt;/a&gt; List item&lt;/li&gt;
&lt;li&gt;&lt;a href="#" id="remove"&gt;--&lt;/a&gt; List item&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
