タイトルを複製すると、すべてのタイトルが部門にコピーされます

Question

divから別の部門にタイトルを複製しようとしていますが、すべてのタイトルを部門に複製しています。どのアイテムがクリックされたかに基づいて別の部門にタイトルをクローンする方法はありますか？

コード：

$(".front-playpause").on("click", function() { 
 
    $(".ep-title").clone().appendTo($(".package")); 
 
});

.front-playpause {background:black;width:10px;height:10px}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
<article> 
 
<div class="front-playpause"></div> 
 
<div class="ep-id-right"> 
 
<div class="ep-num">episode number</div> 
 
<h1 class="ep-title">title post</h1> 
 
</div> 
 
</article> 
 

 
<article> 
 
<div class="front-playpause"></div> 
 
<div class="ep-id-right"> 
 
<div class="ep-num">episode number</div> 
 
<h1 class="ep-title">title post</h1> 
 
</div> 
 
</article> 
 

 
<article> 
 
<div class="front-playpause"></div> 
 
<div class="ep-id-right"> 
 
<div class="ep-num">episode number</div> 
 
<h1 class="ep-title">title post</h1> 
 
</div> 
 
</article> 
 

 
<div class="package"> 
 

 
</div>

Answer 1

あなたがclassnameクローニングしばらく使用するのではなくthisキーワードを使用する必要があります。 classnameを使用すると、そのクラスのすべての要素がクローン化されます。 thisは現在のHTML要素を参照します。

$(".front-playpause").on("click", function() { 
 
    $(".package").append($(this).parent().find('.ep-title').html()); 
 
});

.front-playpause {background:black;width:10px;height:10px}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
<article> 
 
<div class="front-playpause"></div> 
 
<div class="ep-id-right"> 
 
<div class="ep-num">episode number</div> 
 
<h1 class="ep-title">title post</h1> 
 
</div> 
 
</article> 
 

 
<article> 
 
<div class="front-playpause"></div> 
 
<div class="ep-id-right"> 
 
<div class="ep-num">episode number</div> 
 
<h1 class="ep-title">title post</h1> 
 
</div> 
 
</article> 
 

 
<article> 
 
<div class="front-playpause"></div> 
 
<div class="ep-id-right"> 
 
<div class="ep-num">episode number</div> 
 
<h1 class="ep-title">title post</h1> 
 
</div> 
 
</article> 
 

 
<div class="package"> 
 

 
</div>