javascript function does not get called
<p>I am writing javascript code with revealing prototype pattern for the first time. I am having problems. When I call add function when user clicks add button then it shows me this error in the console.</p>

<p><code>Uncaught TypeError: Cannot call method 'add' of undefined</code></p>

<p>How can I solve this problem?</p>

<p>here is my script.js code</p>

<pre><code>$(function () {
var todo = Todo('contents');

$('.addBtn').on('click', function() {
    var name = $(this).parent().find('input[type="text"]').val();
    todo.add(name);
});

$('.contents').on('click', '.remove', function() {
    var el = $(this).parent();
    todo.remove(el);
});

$('.contents').on('click', '.update', function() {
    var dom = $(this);
    todo.addUpdateField(dom);
});

$('.contents').on('click', '.updateBtn', function() {
    var el = $(this);
    todo.update(el);
});

});
</code></pre>

<p>here is my todo.js code</p>

<pre><code>var Todo = function(c) {
    this.contents = $('.' + c);
};

Todo.prototype = function() {
var showel = function (d) {
    this.contents.prepend(d);
},

add = function (name) {
    if(name != "") {
        var div = $('&lt;div class="names"&gt;&lt;/div&gt;')
        .append('&lt;span&gt;' + name + '&lt;/span&gt;')
        .append("&lt;button class='update' class='update'&gt;Edit&lt;/button&gt;")
        .append("&lt;button class='remove' name='remove'&gt;Remove&lt;/button&gt;");
    }

    return showel(div);
},

addUpdateField = function (dom) {
    var name = dom.parent().find('span').text(),
        field = $('&lt;input type="text" value="' + name + '" /&gt;'),
        update = $('&lt;button class="updateBtn"&gt;Update&lt;/button&gt;');

    dom.parent().html('').append(field).append(update);

    return;
},

update = function(el) {
    var val = el.parent().find('input').val();
    el.parent().html('&lt;span&gt;' + val + '&lt;/span&gt;')
    .append('&lt;button class="update" class="update"&gt;Edit&lt;/button&gt;')
    .append('&lt;button class="remove" class="remove"&gt;Remove&lt;/button&gt;');

    return;
},

remove = function (el) {
    return el.remove();
};

return {
    add             : add,
    update          : update,
    remove          : remove,
    addUpdateField  : addUpdateField
};

}();
</code></pre>

<p><strong>Update</strong></p>

<p>After changing
<code>var todo = Todo('contents');</code></p>

<p>to</p>

<p><code>var todo = new Todo('contents');</code></p>

<p>I get this error</p>

<p><code>Object [object Object] has no method 'add'</code></p>

<p><strong>update 2</strong></p>

<p>here is my on <a href="http://jsfiddle.net/BagmY/" rel="nofollow">jsfiddle</a></p>
