jquery - 2 つの類似した要素の CSS クラスを jQuery で個別に変更する

Question

私は 2 つの同様の HTML ブロック (1 つはニュース用、もう 1 つは特別オファー用) を持っています。どちらも下部にページネーション ボタンがあるため、ブロックごとに個別にページネーション ボタンの状態 (アクティブ/非アクティブ) を変更するユニバーサル関数を構築しようとしました。しかし、私は失敗しました。そして、それが問題です。どうすればできますか？

これがJSFiddleです：http://jsfiddle.net/iamsvyat/5TjKQ/

HTML:

<div id="news-block">News Block</div>
<div class="pag-circles">
    <button class="pag-circle-1 active">&nbsp;</button>
    <button class="pag-circle-2 inactive">&nbsp;</button>
    <button class="pag-circle-3 inactive">&nbsp;</button>
    <button class="pag-circle-4 inactive">&nbsp;</button>
</div>
<div id="special-offers-block">Special Offers Block</div>
<div class="pag-circles">
    <button class="pag-circle-1 active">&nbsp;</button>
    <button class="pag-circle-2 inactive">&nbsp;</button>
    <button class="pag-circle-3 inactive">&nbsp;</button>
    <button class="pag-circle-4 inactive">&nbsp;</button>
</div>

CSS:

button {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 6px solid black;
    border-radius: 6px;
}
.active {
    border-color: red;
}
.inactive {
    border-color: black;
}
button:focus {
    outline: none;
}
button:active {
    position: relative;
    top: 1px;
}

jQuery:

$("#news-block").next(".pag-circles").children().click(function() {
    //if the first button is clicked
    //if the second button is clicked
    //if the third button is clicked
    //if the fourth button is clicked
});
$("#special-offers-block").next(".pag-circles").children().click(function() {
    //if the first button is clicked
    //if the second button is clicked
    //if the third button is clicked
    //if the fourth button is clicked
});