Javascript 我想做一个在点击后自动旋转的按钮

我想做一个按钮，点击后自动旋转。该按钮具有动态名称（id、类）。单击时，它会显示或隐藏wordpress帖子的一部分。当柱子被打开时，我希望它朝上，当包裹向下时

<div>
    <div class="button_wrap" id="opis<?php echo get_the_ID()?>"> <button class="button" type="button" id="button<?php echo get_the_ID()?>"></button> </div>
</div>
<script>
    $("#button<?php echo get_the_ID()?>").click(function() {
        $("#opis<?php echo get_the_ID()?>").slideToggle(1000);
    });
</script>

我相信我必须向按钮添加一个css类，但是在第二次单击之后我必须删除它。我有点迷路了，也许有更简单的方法吗？

最简单的方法

$（'.btn'）。单击（函数（）{
$（this.toggleClass（'rotate'）；
});
.btn{
过渡：所有1都容易进入；
}
.轮换{
变换：旋转（360度）；
过渡：所有1都容易进入；
}

内容
确实有效，但我有一个奇怪的错误，只有其他按钮才会旋转。@Tad描述这个错误。有一个循环显示wordpress帖子，在这个循环中，我有一个id，使用post id（id=“button”）来定位按钮和帖子。按钮显示文章的隐藏内容。也许有一种方法可以进一步隔离脚本？我将类更改为上一个函数中使用的id。现在脚本如下所示：$（“#按钮”）.click（function（）{$（this.toggleClass（'rotate'）；}）；谢谢你的帮助！：）@不客气，祝你今天愉快！
.button_wrap {
    width: 100%;
    height: 80px;
    text-align: center;
}
.button {
    background: url(/arrow.svg) no-repeat;
    margin-top: 20px;
    cursor: pointer;
    height: 50px;
    width: 75px;
    border: none;
    transition: .3s ease;
    padding-bottom: 5px;
}
.button:hover {
    background: url(/arrow.svg) no-repeat;
    color: red;
    cursor: pointer;
    height: 50px;
    width: 75px;
    border: none;
    transition: .3s ease;
    margin-top: 13px;
}
.opisy {
    display: none;
}