Question: I'm trying to get the sum of all div's width on the page and show it on click in alert

The problem I'm facing is when I click on the button again to show the sum the result return double and if I click again for the third time, result return tripled and so on

My code in jsfiddle <http://jsfiddle.net/Jim_Toth/enypx/>

HTML

```
<button>Size of all divs?</button><br>
<div style="width: 100px;">REMOVE</div>
<div style="width: 150px;">REMOVE</div>
<div style="width: 200px;">REMOVE</div>
<div style="width: 150px;">REMOVE</div>
<div style="width: 100px;">REMOVE</div>

```

jQuery

```
var divs = 0;
$('button').click(function () {
    $('div').each(function () {
        divs += $(this).outerWidth(true);
    });
    alert(divs + 'px');
});

$('div').click(function () {
    $(this).remove();
});

```

Answer: 
The problem is that your variable storing the widths (`divs`) long outlives the particular function call. Move the variable `divs` inside the click function, like this:

```
$('button').click(function () {
    var divs = 0;
    $('div').each(function () {
        divs += $(this).outerWidth(true);
    });
    alert(divs + 'px');
});

$('div').click(function () {
    $(this).remove();
});

```

Moving the variable inside the function limits the time the variable is living to the time the function is executing. Keep in mind that you won't have access to this variable *outside* of this function then.
Reset `var divs` to `0` before closing the click function.

```
var divs = 0;
$('button').click(function () {
    $('div').each(function () {
        divs += $(this).outerWidth(true);
    });
    alert(divs + 'px');
    divs = 0;     // NOTE: reset divs. Value retains with every
                  // click otherwise.
});

$('div').click(function () {
    $(this).remove();
});

```