Javascript 如何使用js或jquery在一个页面中使用多个css切换开关

我正在尝试做一个切换开关，当切换时，它会从图像中吸取颜色。我被引导到一个帮助我制作开关的教程中，但是它都是css，因此没有为使用的每个开关创建新的类名，我不能重复使用它（我知道） 允许我多次使用此切换的最佳js或jquery是什么

问题是，当我点击任何一个开关时，它总是只为第一个开关设置动画

<div class="switch">
        <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
        <label for="cmn-toggle-7" data-on="Color" data-off="B&W"></label>
</div>

---

因为每个复选框的ID相同，每个标签的属性也相同，所以切换开关都指向第一个复选框

对于每个切换开关，您需要有不同的

id

和相应的

这里有一个更新的提琴：
首先，您在所有框中重复使用相同的id，因此这可能是澄清@crollywood所说内容的一个开端：具有多个相同id的元素是无效的HTML。这就是类的用途。Id必须是唯一的。我知道这一点，但我不想改变每个开关的Id和动画，因为我有12个。我知道使用js有一个更简单的方法，但我找不到确切的代码我只是尝试更改ID，我想我需要为每个不同的ID添加css，但我没有，所以我想我可以更改ID。Sorry@Shniper您应该以类而不是ID为目标来避免这种情况