Как сделать копию элемента при нажатии на кнопку?

Question

[KarlosSatana]

При нажатии на кнопку Prev или Next, добавляется класс .active к следующему элементу в списке и есть блок-превьюшка, который должен копировать блок с классом .active. Аналог слайдера с превью. Как сделать копию элемента в этот блок?
CodePen

<div class="wrapper">
  <div class="wrapper-small-block">
    <div class="small-block">One</div>
    <div class="small-block">Two</div>
    <div class="small-block active">Three</div>
    <div class="small-block">Four</div>
  </div>
  <div class="small-block preview">Three</div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

$('.next').click(function(){
    var content = $('.small-block.active').html();    
    var $next = $('.small-block.active').removeClass('active').next('.small-block');
    $('.preview').html('content');
    if ($next.length) {
    $next.addClass('active'); 
    } else {
        $(".small-block:first").addClass('active');
    }
});

$('.prev').click(function(){    
    var $prev = $('.small-block.active').removeClass('active').prev('.small-block');
    
    if ($prev.length) {
    $prev.addClass('active'); 
    } else {
        $(".small-block:nth-child(4)").addClass('active');
    }
});

Answer 1

[0xD34F]

<button data-step="-1">Prev</button>
<button data-step="+1">Next</button>

$(document).on('click', '[data-step]', function({ target: { dataset: { step } } }) {
  const $wrapper = $(this).closest('.wrapper');
  const $blocks = $wrapper.find('.wrapper-small-block .small-block');
  const $active = $blocks.filter('.active');
  const $nextActive = $blocks.eq(($active.index() + +step) % $blocks.length);

  $active.removeClass('active');
  $nextActive.addClass('active');
  $wrapper.find('.preview').html($nextActive.html());
});

// или

document.addEventListener('click', ({ target: t }) => {
  const { step } = t.dataset;
  if (step) {
    const wrapper = t.closest('.wrapper');
    const blocks = wrapper.querySelector('.wrapper-small-block').children;
    const iActive = Array.prototype.findIndex.call(blocks, n => n.matches('.active'));
    const nextActive = blocks[(iActive + +step + blocks.length) % blocks.length];

    blocks[iActive].classList.remove('active');
    nextActive.classList.add('active');
    wrapper.querySelector('.preview').innerHTML = nextActive.innerHTML;
  }
});

Comments

[KarlosSatana]

Спасибо. Красивый и компактный код.
Второй раз меня выручаешь =)