jQuery: how to change output with click and change functions?
<p>I have a form where I have a group of fields that can be added and removed. One of these fields contains a set of numbers that are added to produce a sum. You can see an example of this here: <a href="http://jsfiddle.net/beehive/HGJck/" rel="nofollow">http://jsfiddle.net/beehive/HGJck/</a></p>

<p>Here's my problem: the sum does not change when I select a different number value when the form first loads, and there is only one group of fields (nothing added). It only changes after I've added or removed fields. How can I fix this?</p>

<pre><code>$(document).ready(function() {
/* Add &amp; Remove */
var removeButton = "&lt;button id='remove'&gt;Remove&lt;/button&gt;";
$('#add').click(function() {
    $('div.container:last').after($('div.container:first').clone());
    $('div.container:last').append(removeButton);

    /* Sum */
    $(".number").change(function() {
        var combined = -10;
        $(".number").each(function() {
            combined += parseInt(this.value);
        });
        $("#sum").html(combined);
    }).trigger("change"); 

    return false;

});

$('#remove').live('click', function() {
    $(this).closest('div.container').remove();
});

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