JS событие .on(“click”) в паре с .filter .attr (оптимизация)

Есть код, который добавляет переменную id в URL браузера при клике на кнопку.

При клике на кнопку, меняется активный айтем. (Всего их 3 с уникальными ID).

Суть в том, что приходится два раза кликнуть на кнопку, чтобы изменился активный айтем и ID в строке браузера.

В следствии этого, происходит всё так, что при клике, активный айтем с ID - 3, а записывается в строку ID предыдущего айтема (т.е. ID - 2). А при первом клике, в строку браузера вообще ничего не записывается.

Пример можно посмотреть и тут.

<button class="button"></button>
<div class="item" data-id="1">item1</div>
<div class="item active" data-id="2">item2</div>
<div class="item" data-id="3">item3</div>
$(".button").on("click", function() {
    var id = $('.item').filter('.active').attr('data-id');
    history.pushState({foo: 'bar'}, 'Title', '/?id=' + id);
});