Javascript: code behaves unexpectedly
<p>I have a question relative to this code. It should (and it does) display a list of items, where you can add and remove entries by clicking on the plus and minus.</p>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
&lt;script&gt;
google.load("jquery", "1.3.2");

app={};
app.attachList = function() {        
        return {
            _current_id : 0,
            addFilterAfter : function(after_entry_id) {
                that = this;
                new_id = this._newId();
                jQuery("#entry_"+after_entry_id).after("&lt;li id=\"entry_"
                                +new_id+"\"&gt;&lt;a href=\"javascript:void(0);\" id=\"entry_"
                                +new_id+"_add\"&gt;(+)&lt;/a&gt;&lt;a href=\"javascript:void(0);\"&gt;(-)&lt;/a&gt; hello "
                                +new_id+"&lt;/li&gt;"); 
                jQuery("#entry_"+new_id+"_add")
                      .bind("click", function() { 
                                     that.addFilterAfter(new_id); 
                                    }  
                           );
            },  
            show : function() {
                that = this;
                new_id = this._newId();
                jQuery("#list").children().remove();
                jQuery("#list").append("&lt;li id=\"entry_"
                         +new_id+"\"&gt;&lt;a href=\"javascript:void(0);\" id=\"entry_"
                         +new_id+"_add\"&gt;(+)&lt;/a&gt; hello &lt;/li&gt;");
                jQuery("#entry_"+new_id+"_add")
                         .bind("click", function() { 
                             alert(new_id); // HERE
                             that.addFilterAfter(new_id); 
                             }
                         );
            },  
            _newId : function() {
                this._current_id++;
                return this._current_id;
            },
        };
}       

app.main = function() { l = app.attachList(); l.show(); }
google.setOnLoadCallback(function() {  jQuery.noConflict(); jQuery(document).ready(app.main); });  
&lt;/script&gt;
&lt;ul id="list" /&gt;&lt;/ul&gt;
&lt;/head&gt;
&lt;/html&gt;
</code></pre>

<p>My question is relative to what happens at the line marked HERE. Ideally, if I click the first item +, I would expect this code to continue adding just below the first item. This does not happen. It continues incrementing the new_id (as you can see from the alert) instead of keeping the original new_id it was granted. </p>

<p>Now, I have a suspect about what's going on, mostly involving the closure nature of javascript, but I want to hear it explained from someone more skilled.</p>

<p>As a side note, if I partition the logic for binding the event in a separate method, it works as expected... from this my suspect.</p>
