JQueryで同じIDを持つ複数の要素を取得

Question

以下のコードのlabelタグにcolorという同じid（５つ）を付与させました。
そのid部分をクリックしたら、それぞれのcssの値（backgroundーcolor）を取得するコードを書いたのですが、一番最初の奴しか取得できません。

                   <div class="btn-group-toggle mb-3" data-toggle="buttons">
                        <label class="btn ml-4" id="color" style="width:80px; height:40px; background-color:#006699;">
                            <input type="checkbox" autocomplete="off">
                        </label>
                    </div>
                    <div class="btn-group-toggle" data-toggle="buttons">
                        <label class="btn ml-2" id="color" style="width:80px; height:40px; background-color:#FFEEFF;">
                            <input type="checkbox" autocomplete="off">
                        </label>
                    </div>
                    <div class="btn-group-toggle" data-toggle="buttons">
                        <label class="btn ml-2" id="color" style="width:80px; height:40px; background-color:#FFFFCC;">
                            <input type="checkbox" autocomplete="off">
                        </label>
                    </div>
                    <div class="btn-group-toggle" data-toggle="buttons">
                        <label class="btn ml-2" id="color" style="width:80px; height:40px; background-color:#EEEEEE;">
                            <input type="checkbox" autocomplete="off">
                        </label>
                    </div>
                    <div class="btn-group-toggle" data-toggle="buttons">
                        <label class="btn ml-2" id="color" style="width:80px; height:40px; background-color:#FFDBC9;">
                            <input type="checkbox" autocomplete="off">
                        </label>
                    </div>

<script>
    jQuery(function($) {
        $('#color').click(function() {
            var a = $("[id=color]").css("background-color");
            console.log(a);
        });
    });
</script>

"[id=color]"と同じ名前のid全てに処理をさせるように書いているのですが、うまくいかないです。
どなたかご教授ください。よろしくお願いします。

Answer 1

HTMLは同一ページ内に同一idを仕様として許可していません。
classに置き換えて組みなおしましょう。

$( '.color' ).click( function() {
    var a = $( this ).css( 'background-color' );
    console.log( a );
} );

Comments

[h.yamazaki]

ありがとうございます！