【jQuery】同じclickイベントをグループごとに発生させたい

Question

前提・実現したいこと

プログラミング初心者です。
1つのhtml内で「もっと見る」を実装しているのですが、２つ以上ある場合２つ目が動かなく、どのように対処すれば良いか知りたいです。
section1も2も、最初の2つのリスト以外を非表示にするという振る舞いは動いていますが、click時に同じdiv内のul#listをターゲットにしてイベントを発生させたいです。

該当のソースコード

var moreNum = 2;
//最初の２件以外、非表示にする
$('ul #item:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');

$('#more-button').on('click', function () {
    // slice
    $('ul #item.is-hidden').slice(0, moreNum).removeClass('is-hidden').addClass('is-show');
    // 表示するものがなくなったらボタン消す
    if ($('#item.is-hidden').length == 0) {
        $('#more-button').fadeOut(2000);
    }
});

            <div class="section1">
                <ul>
                    <li id="list"></li>
                    <li id="list"></li>
                    <li id="list"></li>
                    <li id="list"></li>
                    <li id="list"></li>
                </ul>
                <button id="more-button"></button>
            </div>
            <div class="section2">
                <ul>
                    <li id="list"></li>
                    <li id="list"></li>
                    <li id="list"></li>
                    <li id="list"></li>
                    <li id="list"></li>
                </ul>
                <button id="more-button"></button>
            </div>

試したこと

$('#more-button').prev('ul #userlist-item.is-hidden').slice(0, moreNum).removeClass('is-hidden').addClass('is-show');

としてみましたが、今度はsection1も2も動かなくなりました。

Answer 1

idが競合しているのでクラスに変更してください

Comments

[Oheso21]

ありがとうございます！こういったケースではidを使ってはいけないのですね。。大変助かりました！

[Oheso21]

すみません、解決済みにしてしまったのですが、classに変更しただけでは直りませんでした。。