javascript - javascript toggleClass仅适用于一组div

我建立了我的作品集网站，这样你就可以隐藏/展示我作品的不同类别——品牌、艺术等。
为此，我创建了hide/show按钮，并设置了一个十字X的动画，将其旋转45度，变成一个加号+来指示单击它是分别隐藏还是显示类别。希望这是有道理的。
为此，我使用了以下代码
Javascript代码：

$(function() {
            $("#buttonDigital").click(function() {
                $(".DigitalImg").toggleClass("DigitalImg-change");
            });
        });

HTML-注意该按钮包含在categories desktop div中（仅在较大屏幕上可见）：

<div id="categories-desktop">
    <div id="buttonDigital" style="cursor: pointer;" onclick="$('.brick.digital').toggle();">
                        <p>DIGITAL</p>
                        <img class="DigitalImg" src="img/button/x.png">
    </div>
</div>

CSS:

    #buttonDigital {
    width: 180px;
    height: 25px;
    background-color: #ff644b;
}
    .DigitalImg {
    position: relative;
    right: -158px;
    top: -16px;
    transition: 0.2s ease-out;
}

 .DigitalImg-change {
    -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        transition: 0.2s ease-out;
 }

你可以看到我在www.jackwatson.co.uk
当站点显示在宽度小于855px的屏幕上时，我希望按钮占据屏幕的整个宽度，并且只在您向下滚动页面时出现在每个类别的上方（每个项目也占据屏幕的整个宽度）。
我复制并粘贴了相同的按钮，并将它们放在div中，以便仅以这种小屏幕大小显示：

<div id="categories-mobile">
                    <div id="buttonDigital" style="cursor: pointer;" onclick="$('.brick.digital').toggle();">
                        <p>DIGITAL</p>
                        <img class="DigitalImg" src="img/button/x.png">
                    </div>
                </div>

然而，使X rotate转换的javascript在这一点上似乎停止了工作，我真的不知道为什么。
我绝对是个傻瓜，所以这可能是个愚蠢的问题，我很感谢你抽出时间来研究这个问题，也非常感谢你的帮助。

最佳答案

只应使用唯一的ID，因此如果您将#buttonDigital更改为基于类的选择器。buttonDigital然后移除或更改该ID，以便每个div都是唯一的，并将类添加到它们应该可以工作。
希望有帮助

$(function() {
        $(".buttonDigital").click(function() {
            $(".DigitalImg").toggleClass("DigitalImg-change");
        });
    });

然后html看起来像（您需要使用-1，-2，-4，这样每个按钮都是唯一的。你也可以删除id，除非你需要它在其他地方

 <div id="buttonDigital-1" class='buttonDigital' style="cursor: pointer;" onclick="$('.brick.digital').toggle();">
                    <p>DIGITAL</p>
                    <img class="DigitalImg" src="img/button/x.png">
                </div>