Owl Carousel 2: filtering items, but keep the sort order using Javascript

Question

I'm currently using Owl Carousel 2 and combining it with this filtering example to create a filter menu that when titles in the filter menu list are clicked all other items in the carousel disappear. This works really well except that when SHOW is clicked and all items return to the carousel they are not in the order they started.

Owl Carousel 2 http://www.owlcarousel.owlgraphic.com/docs/api-options.html

Filter http://www.xcast3d.com/spotlight/bootstrap-carousel-filter/

I need them to keep their sort order. Perhaps there is a better way to filter them simply using css display:none? but I'm not sure how to write this. Perhaps someone can help me alter this script or think of a better filtering solution to keep the order. Many Thanks

Answer 1

The solution I've found is to copy all items in the hidden div, and on filtering, empty the carousel and add again only the filtered elements in the initial order.

Working Fiddle here : http://jsfiddle.net/TWtwt/301/

$('#projects-copy .project.' + cat).each(function () {
   owl.addItem($(this).clone());
});