クリックした画像に赤い枠線を付ける

cssにてクリックした画像に赤い枠線が付くようにしていましたが、スライダーにし動作させたところ、スライドさせた画像をクリックしても一番最初に表示されていた画像と同じ順番の画像に赤い枠がついてしまいました。
スライダーにしてもクリックした画像に赤い枠線をつける方法がありましたらご教授いただけると助かります。

html
1    <p class="color-title">カラー<span class="color-text">を選択してください</span></p>
2    <div class="color slider2">
3      <div class="image-border">
4      <input type="radio" id="check-color1" name="check-color" value="1" />
5      <label class="check-color-item check-color-item1" for="check-color1"><img src="https://placehold.jp/72x86.png"></label>
6    </div>
7    <div class="image-border">
8      <input type="radio" id="check-color2" name="check-color" value="2"/>
9      <label class="check-color-item check-color-item2" for="check-color2"><img src="https://placehold.jp/72x86.png"></label>
10    </div>
11    <div class="image-border">
12      <input type="radio" id="check-color3" name="check-color" value="3"/>
13      <label class="check-color-item check-color-item3" for="check-color3"><img src="https://placehold.jp/72x86.png"></label>
14    </div>
15    <div class="image-border">
16      <input type="radio" id="check-color4" name="check-color" value="4"/>
17      <label class="check-color-item check-color-item4" for="check-color4"><img src="https://placehold.jp/72x86.png"></label>
18    </div>
19    <div class="image-border">
20    <input type="radio" id="check-color1" name="check-color" value="1" />
21    <label class="check-color-item check-color-item1" for="check-color1"><img src="https://placehold.jp/72x86.png"></label>
22  </div>
23  <div class="image-border">
24    <input type="radio" id="check-color2" name="check-color" value="2"/>
25    <label class="check-color-item check-color-item2" for="check-color2"><img src="https://placehold.jp/72x86.png"></label>
26  </div>
27  <div class="image-border">
28    <input type="radio" id="check-color3" name="check-color" value="3"/>
29    <label class="check-color-item check-color-item3" for="check-color3"><img src="https://placehold.jp/72x86.png"></label>
30  </div>
31  <div class="image-border">
32    <input type="radio" id="check-color4" name="check-color" value="4"/>
33    <label class="check-color-item check-color-item4" for="check-color4"><img src="https://placehold.jp/72x86.png"></label>
34  </div>
35  <div class="image-border">
36    <input type="radio" id="check-color3" name="check-color" value="3"/>
37    <label class="check-color-item check-color-item3" for="check-color3"><img src="https://placehold.jp/72x86.png"></label>
38  </div>
39  <div class="image-border">
40    <input type="radio" id="check-color4" name="check-color" value="4"/>
41    <label class="check-color-item check-color-item4" for="check-color4"><img src="https://placehold.jp/72x86.png"></label>
42  </div>
43    </div>

css
1  .color-title {
2    border-top: solid 1px #B3B3B3;
3    padding-top: 20px;
4  }
5  .color {
6    display: flex;
7    justify-content: space-around;
8    align-items: center;
9  }
10  .check-color-item{
11    height: auto;
12  }
13  .check-color-item img{
14    vertical-align: bottom;
15    width: 100%;
16  }
17  input[type="radio"] {
18    display: none;
19  }
20  input[type="radio"] + .check-color-item img {
21    position: relative;
22    width: 72px;
23    height: 86px;
24    text-align: center;
25    display: flex;
26    padding: 2px;
27  }
28  input[type="radio"]:checked + .check-color-item img {
29    border: solid 2px red;
30    padding: 0;
31  }

js
1$(function(){
2  $('.slider2').slick({
3    infinite: false,
4    dots: true,
5    arrows: false,
6    slidesToShow: 4,
7    slidesToScroll: 4
8});
9});

試したことですが、image-border-ckクラスを追加してクリックイベントでオンとオフができるようにとしてみましたが同じ症状で解決できませんでした。

html
1 <p class="color-title">カラー<span class="color-text">を選択してください</span></p>
2    <div class="color slider2">
3      <div class="image-border　image-border-ck">
4      <input type="radio" id="check-color1" name="check-color" value="1" />
5      <label class="check-color-item check-color-item1" for="check-color1"><img src="https://placehold.jp/72x86.png"></label>
6    </div>
7    <div class="image-border">
8      <input type="radio" id="check-color2" name="check-color" value="2"/>
9      <label class="check-color-item check-color-item2" for="check-color2"><img src="https://placehold.jp/72x86.png"></label>
10    </div>
11    <div class="image-border">
12      <input type="radio" id="check-color3" name="check-color" value="3"/>
13      <label class="check-color-item check-color-item3" for="check-color3"><img src="https://placehold.jp/72x86.png"></label>
14    </div>
15    <div class="image-border">
16      <input type="radio" id="check-color4" name="check-color" value="4"/>
17      <label class="check-color-item check-color-item4" for="check-color4"><img src="https://placehold.jp/72x86.png"></label>
18    </div>
19    <div class="image-border">
20    <input type="radio" id="check-color1" name="check-color" value="1" />
21    <label class="check-color-item check-color-item1" for="check-color1"><img src="https://placehold.jp/72x86.png"></label>
22  </div>
23  <div class="image-border">
24    <input type="radio" id="check-color2" name="check-color" value="2"/>
25    <label class="check-color-item check-color-item2" for="check-color2"><img src="https://placehold.jp/72x86.png"></label>
26  </div>
27  <div class="image-border">
28    <input type="radio" id="check-color3" name="check-color" value="3"/>
29    <label class="check-color-item check-color-item3" for="check-color3"><img src="https://placehold.jp/72x86.png"></label>
30  </div>
31  <div class="image-border">
32    <input type="radio" id="check-color4" name="check-color" value="4"/>
33    <label class="check-color-item check-color-item4" for="check-color4"><img src="https://placehold.jp/72x86.png"></label>
34  </div>
35  <div class="image-border">
36    <input type="radio" id="check-color3" name="check-color" value="3"/>
37    <label class="check-color-item check-color-item3" for="check-color3"><img src="https://placehold.jp/72x86.png"></label>
38  </div>
39  <div class="image-border">
40    <input type="radio" id="check-color4" name="check-color" value="4"/>
41    <label class="check-color-item check-color-item4" for="check-color4"><img src="https://placehold.jp/72x86.png"></label>
42  </div>
43    </div>

css
1.image-border img {
2    position: relative;
3    width: 72px;
4    height: 86px;
5    text-align: center;
6    display: flex;
7    padding: 2px;
8  }
9  .image-border-ck img {
10    border: solid 2px red;
11    padding: 0;
12  }

js
1$(function(){
2$('.image-border').on('click',function(){
3$('.image-border').removeClass('image-border-ck');
4$(this).addClass('image-border-ck');
5});
6});