Javascript 如何在配对图像按钮中生成第二个触发器脚本？

集合A是脚本化的成对按钮图像。当您单击某个图像时，它将更改为其一对或一组图像

现在如果我有另一个集合，集合B，我想让集合B和集合A一样工作，而不会互相干扰。如何做到这一点？我试图给集合B提供一个新的唯一ID，但对如何将新ID集成到脚本中感到困惑

$（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
$（this.add（$（this.sides（））.toggleClass（'hide'）；
if（$（this.attr（'id'）=='predator_only'）{
$（'.predator:not（.hide'）。添加（$（'.predator:not（.hide'））。兄弟姐妹（））.toggleClass（'hide'）；
}
else if（$（this）.attr（'id'）=='mixed'）{
$（'.predator.hide'）。添加（$（'.predator.hide'）.sides（））.toggleClass（'hide'）；
}
其他的
{
如果（$（'.predator.hide'）。长度>0）{
$（'#mixed'）。removeClass（'hide'）；
$（'predator'u only'）。addClass（'hide'）；
}
否则{
$（'#mixed'）.addClass（'hide'）；
$（'predator'u only'）。移除类（'hide'）；
}
}
});
});
/*仅用于布局*/
div{
显示：内联块；
}
/*用于隐藏图像*/
.隐藏{
显示：无；
}

这是一组：



这是集合B：