如何在配对图像按钮中制作第二个触发器脚本？

Question

Set A是一个脚本化的配对按钮图像。单击某个图像时，它将更改为其一对或一组图像。

现在如果我有另一套，设置B，我想让套装B完全像套装A一样工作而不会相互干扰。这该怎么做？我试图给set B一个新的唯一ID，但是如何在脚本中集成新的ID会很困惑。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('img').click(function() {
    $(this).add($(this).siblings()).toggleClass('hide');
    if($(this).attr('id') == 'predator_only') {
      $('.predator:not(.hide)').add($('.predator:not(.hide)').siblings()).toggleClass('hide');
    }
    else if($(this).attr('id') == 'mixed') {
      $('.predator.hide').add($('.predator.hide').siblings()).toggleClass('hide');
    }
    else
    {
      if($('.predator.hide').length > 0) {
        $('#mixed').removeClass('hide');
        $('#predator_only').addClass('hide');
      }
      else {
        $('#mixed').addClass('hide');
        $('#predator_only').removeClass('hide');
      }
    }
  });
});

＆＃13;

/* For layout only */
div {
  display: inline-block;
}

/* Used to hide image */
.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This is set A:
<div>
<div>
  <img src="https://s24.postimg.org/3tsfw9psl/Predator.png" id="predator_only"/>
  <img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" id="mixed"/>
</div>

<div>
  <img src="https://s24.postimg.org/ski4a355h/Lion.png" class="predator" />
  <img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/vxvetx51x/Wolf.png" class="predator"/>
  <img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/ll42aq579/Tiger.png" class="predator"/>
  <img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/flgb72ket/Shark.png" class="predator"/>
  <img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" class="predator"/>
  <img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>

<br><br>
This is set B:
<div>
<div>
  <img src="https://s24.postimg.org/3tsfw9psl/Predator.png" id="predator_only2"/>
  <img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" id="mixed2"/>
</div>

<div>
  <img src="https://s24.postimg.org/ski4a355h/Lion.png" class="predator2" />
  <img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/vxvetx51x/Wolf.png" class="predator2"/>
  <img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/ll42aq579/Tiger.png" class="predator2"/>
  <img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/flgb72ket/Shark.png" class="predator2"/>
  <img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" class="predator2"/>
  <img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>

＆＃13;

＆＃13;

＆＃13;