JSFiddle - React, Tailwind, and code Playground

HTML

<p>▼▼画像クリックでスライド▼▼</p>

<!-- 【スライダーA】 -->
<section id="A">
<div class="slider">
  <input type="radio" name="slider" id="slider-a1" class="slider1" value="a1" checked>
  <input type="radio" name="slider" id="slider-a2" class="slider2" value="a2">
  <input type="radio" name="slider" id="slider-a3" class="slider3" value="a3">
  <div class="inner_slider">
    <label for="slider-a2"><img src="http://bit.ly/2sNLCTb" class="img1"></label>
    <label for="slider-a3"><img src="http://bit.ly/2FtAkX4" class="img2"></label>
    <label for="slider-a1"><img src="http://bit.ly/2FrhxLM" class="img3"></label>
  </div>
</div>
  <div class="hukusei">複製ボタン</div>
</section>

<!-- 【スライダーB】 -->
<section id="B">
<div class="slider">
  <input type="radio" name="slider" id="slider-b1" class="slider1" value="b1" checked>
  <input type="radio" name="slider" id="slider-b2" class="slider2" value="b2">
  <div class="inner_slider">
    <label for="slider-b2"><img src="http://bit.ly/2oySzSB" class="img1"></label>
    <label for="slider-b1"><img src="http://bit.ly/2ozsrXV" class="img2"></label>
  </div>
</div>
  <div class="hukusei">複製ボタン</div>
</section>

<!-- 【複製画像】 -->   
<p>▼▼ここに複製▼▼</p>
<div class="linkimg"></div>

<script>
(function($){
$(document).ready(function(){
    $(".hukusei").click(function(){
        var cloneObject = $(this).parent().find(".slider").clone();
        // console.log(cloneObject[0]);
            $(".linkimg").empty();
        cloneObject.appendTo($(".linkimg"));
        cloneObject.find("input").hide();
    })
});
})(jQuery);
</script>

CSS

/* 【スライダー】のCSS */
.slider {
width: 200px;
height: 150px;
overflow: hidden;
}
.img1 {
position: absolute;
left: 0;
top: 0;
}
.img2 {
position: absolute;
left: 200px;
top: 0;
}
.img3 {
position: absolute;
left: 400px;
top: 0;
}
.img4 {
position: absolute;
left: 600px;
top: 0;
}

.inner_slider {
position: relative;
width: 800px;
left: 0;
top: 0;
transition: all .3s ease-in-out;
}
.inner_slider > img {
  width: inherit;
  height: inherit;
  object-fit: contain;
}

.slider1:checked ~ .inner_slider {
transform: translateX(0);
}
.slider2:checked ~ .inner_slider {
transform: translateX(-200px);
}
.slider3:checked ~ .inner_slider {
transform: translateX(-400px);
}


/* 装飾のCSS */
p:first-child {
  background: #65beff;
}
p {
  background: #FF6565;
  padding: 5px;
}

.hukusei {
  background: #0a7cff;
  width: 150px;
  padding: 5px;
  border-radius: 10px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  margin: 10px;
  cursor: pointer;
}