Duplicate an item in another div with isotope?

Question

I would like to duplicate one of my articles in the right column ($rightcontainer) when I click on it. However, I don't see any isotope option that allows you to duplicate an item rather than simply move it. Is it possible to keep my item in my left column ($leftcontainer) while adding it to the right? I thank you for your help!

$(window).load(function() {
  var $leftcontainer = $('.articleContainer'),
  $rightcontainer = $('.printContainer'),
  $body = $('body'),
  colW = 100,
  columns = null;

  $leftcontainer.isotope({
    itemSelector: '.article-box',
    percentPosition: true,
    masonry: {
      // use outer width of grid-sizer for columnWidth
      columnWidth: '.article-sizer',
    }
  })
  $rightcontainer.isotope({
    itemSelector: '.article-box',
    masonry: {
      columnWidth: $rightcontainer.find('.printContainer')[0]
    }
  })

  // On click, add article to the right section
  $('.main-section').on( 'click', '.insert-button', function() {
    var $item = $(this);
    $rightcontainer.isotope( 'insert', $item );
    $container.isotope('layout');
  });
});

Answer 1

I am not familiar with isotope but as it looks it makes use of the append() function of jQuery. Jquery's append() takes an element and removes it from its current parent and adds it to your new parent.

Try to clone your element before you append it. that should make a deep copy of your element and then you append the copy.

var $item = $(this).clone();