JQueryの任意N番目の画像をクリックしたら、別要素のN番目の画像を変えたい

前提・実現したいこと

下記ソースコードのアイコン画像をクリックした時「_off.png」が「_on.png」に切り替えができるようになっていて、一番下のボタンはアイコンが一つでも「_on」の時(=クラスが付いた時)、activeになる様になっています。

これが、別の箇所にも<span>が無いだけのほぼ同じソースがあり、この2つのアイコンの動きを連動させたいのですが、どうしても分からず。
乏しい知識の中で、書き換えてしまえば…と思ったのですが片方(下記部分)は<span>のテキストが在り、もう片方は<span>のテキスト無しのため上手く書き換えが出来ず。
単純に不要箇所削除する、だけでは対処ができず行き詰ってしまいました。
どなたか分かる方、ご教示いただけますと幸いです。

該当のソースコード

<div class="before">
  <div slacc="genre">
    <ul class="genre-img genre-img-w-max">
      <li>
        <img src="/img/ico_01_off.png" alt="">
        <span class="sub-text">レストラン</span>
      </li>
      <li>
        <img src="/img/ico_02_off.png" alt="">
        <span class="sub-text">ショップ</span>
      </li>
      <li>
        <img src="/img/ico_03_off.png" alt="">
        <span class="sub-text">マッサージ</span>
      </li>
      <li>
        <img src="/img/ico_04_off.png" alt="">
        <span class="sub-text">ホテル</span>
      </li>
      <li>
        <img src="/img/ico_05_off.png" alt="">
        <span class="sub-text">アクティビティ</span>
      </li>
      <li>
        <img src="/img/ico_06_off.png" alt="">
        <span class="sub-text">エンターテインメント</span>
      </li>
      <li>
        <img src="/img/ico_07_off.png" alt="">
        <span class="sub-text">その他</span>
      </li>
    </ul>
  </div>
</div>

<div class="btn-A">
  <a href="#aaa" class="btn-link">地図を見る</a>
</div>

試したこと

<<jQuery>>
// 画像の切り替え＆「_on.png（li）」にclass追加
$('.genre li img').click(function () {
  if ($(this).attr('src').indexOf('_off') !== -1) {
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
    $(this).closest('li').addClass('-select');
  } else {
    $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
    $(this).closest('li').removeClass('-select');
  }
});

// <span>テキスト無しの箇所に複製
 $('.btn-A').click(function () {
  var genreImg = $('.before .genre li').clone(true);
  $('.after .genre .genre-img').html(genreImg);
  $('.before .genre li .sub-text').remove();
});

その他
・「.-select」が付いたclassのsrcを書き換える → もう片方が全部同じアイコンになった