Remove and then add same element to Packery JS

I want to remove 2 elements and then add them back to a grid built with Packery when a button is clicked. The code is given below:

$('.append-button').on( 'click', function() {
  // create new item elements
  var $items = getItemElement().add( getItemElement() ).add( getItemElement() );
  var $items2 =  $('.big');
  var el = $items2;

  // remove and then append elements to container
  $grid.packery('remove', $items2).packery('layout')
  $grid.append( $items2 )
    // add and lay out newly appended elements
    .packery( 'appended', $items2 );
});

If I do this, the elements referenced by $items2 appear on reload of Packery but then disappears. Codepen demo here. Does anyone know how I can delete the 2 elements and then add them back in a stable manner? Thanks in advance!!

Solution

I added the .clone() function to duplicate then element before removing it. Then I removed the old one. It worked quite well.

New CodePen:

http://codepen.io/anon/pen/qrzxWG

// external js: packery.pkgd.js

var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

$('.append-button').on( 'click', function() {
  // create new item elements
  var $items = getItemElement().add( getItemElement() ).add( getItemElement() );
    var $new = $('.big').clone();
    var $items2 =  $('.big');
    var el = $items2;
    // append elements to container
    $grid.packery('remove', $items2).packery('layout')
    $grid.append( $new )
      // add and lay out newly appended elements
      .packery( 'appended', $new );
});


// make <div class="grid-item grid-item--width# grid-item--height#" />
function getItemElement() {
  var $item = $('<div class="grid-item"></div>');
  // add width and height class
  var wRand = Math.random();
  var hRand = Math.random();
  var widthClass = wRand > 0.85 ? 'grid-item--width3' : wRand > 0.7 ? 'grid-item--width2' : '';
  var heightClass = hRand > 0.85 ? 'grid-item--height3' : hRand > 0.5 ? 'grid-item--height2' : '';
  $item.addClass( widthClass ).addClass( heightClass );
  return $item;
}

/* Unmodified so I minified it */

*{box-sizing: border-box;}body{font-family: sans-serif;}/* ---- grid ---- */.grid{background: #DDD; max-width: 1200px;}/* clear fix */.grid:after{content: ''; display: block; clear: both;}/* ---- .grid-item ---- */.grid-item{float: left; width: 80px; height: 80px; background: #C09; border: 2px solid hsla(0, 0%, 0%, 0.5);}.grid-item--width2{width: 160px;}.grid-item--height2{height: 160px;}.grid-item--width3{width: 240px;}.grid-item--height3{height: 240px;}button{font-size: 20px;}

<!-- left unmodified so it's minified -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://mfzy.co/packery.pkgd.js"></script><div class="grid"> <div class="grid-item grid-item--width2"></div><div class="grid-item grid-item--height2"></div><div class="grid-item big"></div><div class="grid-item big"></div><div class="grid-item grid-item--height2"></div></div><p><button class="append-button">Append items</button></p>