[SOLVED] Copy div and append to a another element in a set of elements using jQuery

Copy div and append to a another element in a set of elements using jQuery

I want to clone a div and append this to another element in a HTML table using jQuery. For example

I want to copy the div section_title and append this immediately in the append_class span. In other words, the div section_title FIRST TITLE will be appended to the span append_class and likewise.

Here is the HTML

<tr class="tr_class">
<th scope="row">
<div class="section_title">FIRST TITLE</div>
</th>
<td>
RANDOM CONTENT...
</td>
</tr>
<span class="append_class"></span>

<tr class="tr_class">
<th scope="row">
<div class="section_title">SECOND TITLE</div>
</th>
<td>
RANDOM CONTENT...
</td>
</tr>
<span class="append_class"></span>


<tr class="tr_class">
<th scope="row">
<div class="section_title">THIRD TITLE</div>
</th>
<td>
RANDOM CONTENT...
</td>
</tr>
<span class="append_class"></span>

My attempt failed.

var cloneTitle= $('.tr_class').find('.section_title').clone();
$('.append_class').html(cloneTitle);

It does clone but it clones all the section_title and append them accordingly.

Any guidance on this will be appreciated.

Thanks in advance

Solution

If I got your point You need to use .each() and $(this)

$('.tr_class').each(function(){
   var cloneTitle = $(this).find('.section_title').clone();
    $(this).next('.append_class').html(cloneTitle);
});