Копирование содержимого блоков с одинаковым классом JS

Question

Задача при клике на разные блоки с классом "media" копировать их содержимое в блок c классом "tt", чтоб они появлялись один под другим.

Сейчас это не работает, т.к. на какой бы блок ("media") не нажимал, все копируется с первого.

//выбираем нужные элементы
var a = document.querySelectorAll('.media');

//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
        $('#clicker').clone(true).unwrap().appendTo('.tt');
    }
});

<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">54,120</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">12,650</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">32,390</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">76,770</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>

<div class="tt">

</div>

Answer 1

$('.media').click(function(e) {
  $('.tt').append(this.outerHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">54,120</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">12,650</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">32,390</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">76,770</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>

<div class="tt">

</div>

Answer 2

//выбираем нужные элементы
var a = document.querySelectorAll('.media');

//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
        $(this).clone(true).unwrap().appendTo('.tt');
    }
});

<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">54,120</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">12,650</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">32,390</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>
<div class="media" id="clicker">
  <div class="media-body">
    <h3 class="mb-0">76,770</h3>
    <span class="text-uppercase font-size-xs">total</span>
  </div>
</div>

<div class="tt">

</div>

БЛОГ НА HUSL

Копирование содержимого блоков с одинаковым классом JS

Ответы (2 шт):