Maybe I've lost the plot, but why is this small piece of JavaScript not working?
<p>I want a generic error handler for my forms</p>

<pre><code>var errorsBox = function() {
    var $errorBox = $('#form-error');

    return {
        add: function(errors) {
            if ($errorBox.length === 0) {
                $errorBox = $('&lt;div id="form-error"&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;').appendTo('form');
            };

            $errorBox.find('ul &gt; li').remove();

            $.each(errors, function(i, error) {
                $errorBox.find('ul').append('&lt;li&gt;' + error + '&lt;/li&gt;');
            });
        }
    };
};
</code></pre>

<p>You can play with it on <a href="http://jsbin.com/aloya4/edit" rel="nofollow">JSbin</a>.</p>

<p>I'm getting</p>

<blockquote>
  <p>errorsBox.add is not a function</p>
</blockquote>

<p>I'm sure it's really obvious, but I can't seem to understand why this might not be working.</p>

<p>What have I done wrong?</p>

<p>Thanks!</p>
