JQuery Plugins don't seem to be working
<p>I am trying to work out following example but it doesn't seem to work. The following example makes use of backbone.js and prints a <code>list item</code> with the counter as the <code>button</code> is clicked. The problem seems to be with jquery plugin, but I am not able to figure out since I am very new to this. Kindly help.</p>

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

<pre><code>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;IstreetApp&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"&gt;&lt;/script&gt;
        &lt;script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"&gt;&lt;/script&gt;
        &lt;script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            (function($)){
            var ListView = Backbone.View.extend({
                el: $('body'),

                events: {
                    'click button#add': 'addItem'
                },

                initialize: function(){
                    _.bindAll(this, 'render', 'addItem');
                    this.counter = 0;
                    this.render();
                },

                render: function(){
                    $(this.el).append("&lt;button id='add'&gt;Add list&lt;/button&gt;");
                    $(this.el).append("&lt;ul&gt;&lt;/ul&gt;")
                },

                addItem: function(){
                    this.counter++;
                    $('ul', this.el).append("&lt;li&gt;Hello IstreetApp" + this.counter + "&lt;/li&gt;");
                }
            });

            var listView = new ListView();
            })(jQuery);
         &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
