Isotope add element flexbox grid

Question

Almost done with my project, just one thing isn't working properly. I used Isotope for deleting items and this works perfectly. The item gets removed and the next item slides in it's place. Now I want to add items to the grid. If I remove the Isotope functionality it all works, but I want it to work together with Isotope (because of the nice transitions etc). If I use my current code, nothing happens, except for the last item (it gets cloned but isn't added to the grid).

To reproduce problem:
- Click on Add user
- Nothing happens

Working:
- Remove the isotope js file from the header and the isotope js from the JS file (line 7 to 16)
- Click on Add user
- User gets added to the grid nicely

Here is a snippet of my JS:

  $('.js-add-user').on( 'click', function(e) {
    e.preventDefault();
    $('.js-grid-item:last').clone().insertAfter($('.js-grid .js-grid-item:last'));
});

See my Fiddle:

https://jsfiddle.net/r3c05odv/3/

Can anyone please help me?

Answer 1

You can use isotope's append method:

$('.js-add-user').on( 'click', function(e) {
    e.preventDefault();
    var $items = $('.js-grid-item:last').clone();
 // append items to grid
 $grid.append( $items )
// add and lay out newly appended items
  .isotope( 'appended', $items );   
 });

The only issue is, since you use $('.js-grid-item:last').clone();, if you delete all items, there is no "last" to clone.