教えてください。

下記のソースを3つ繰り返して、レシピの写真とコメントのコンテンツを作ろうとしています。が、1つの場合ですとちゃんとメインの画像も、サムネイルの画像も表示されるのですが、
同じソースを3回並べるとメインの画像が1か所でしか表示されません。
多分　input type="radio"～　が違うのかなと思いますが・・・
誰かお判りになる方、アドバイスを頂けますでしょうか？
よろしくお願いいたします。

HTML

        <div class="elem-pic-block--470" style="background: #f2eddf;margin-bottom: 0;"><div><div><div><div class="horizontal">

                    <div class="cp_cssslider">
                        <input type="radio" name="cp_switch" id="photo1" checked/>
                        <label for="photo1"><img src="img/img_06.jpg" alt="photo1" /></label>
                        <img src="img/img_06.jpg" alt="photo1" />
                        <input type="radio" name="cp_switch" id="photo2"/>
                        <label for="photo2"><img src="img/img_06_02.jpg" alt="photo2" /></label>
                        <img src="img/img_06_02.jpg" alt="photo2" />
                        <input type="radio" name="cp_switch" id="photo3"/>
                        <label for="photo3"><img src="img/img_06_03.jpg" alt="photo3" /></label>
                        <img src="img/img_06_03.jpg" alt="photo3" />
                        </div>                      
                    <!-- /スライド2　-->     
                <div class="txt-container"><div>
                    <div class="txt-head">
                        <div class="elem-heading-lv3"><div><div><div><div>
                            <div class="title-holder"><div>
                                <table>
                                <tr>
                                    <td><img src="img/kyara01.jpg" alt=""></td>
                                    <td><h3><span style="color: red">Vol.1</span> キムチ鍋</h3>なべ研究員Ｈ　／　おすすめ度　☆☆★★★</td>
                                </tr>
                                </table>                                
                                <h3><span></span></h3>
                            <!-- /title-holder --></div></div>
                        <!-- /elem-heading-lv3 --></div></div></div></div></div>
                    <!-- /txt-head --></div>
                    <div class="txt-body">
                        <div class="elem-paragraph"><div><div><div><div>
                            <p>コメントコメントコメント</p>
                        <!-- /elem-paragraph --></div></div></div></div></div>
                    <!-- /txt-body --></div>

            <!-- /elem-separator --></div></div></div></div></div>
                <div class="" role="separator"><div><div><div><div>
                <hr style="border-top: 1px dashed #8c8b8b;margin-bottom: 0;">
                    </div></div></div></div></div>
                <!-- /txt-container --></div></div>

css

  *, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_cssslider{
width: 2106px;
padding-top: 240px; /* 画像の高さ */
position: relative;
margin: 2em 2em;
text-align: center;
}
.cp_cssslider> img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
border-radius: 3px;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
display: none;
}
/* サムネイル */
.cp_cssslider label {
margin: 15px 5px 0 5px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
opacity: 0.6;
border-radius: 3px;
}
.cp_cssslider label:hover {
opacity: 0.9;
}
.cp_cssslider label img {
display: block;
width: 40px;
border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
border: 2px solid #FF7043;
opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
opacity: 1;
}