Multiple items on change event

Hi. I try to implement Infinite Scroll - Loading JSON + Masonry.
I want run it in document.ready, but also when a dropdown change.
So, based to [this example](https://codepen.io/desandro/pen/QgMWzV/) I group all js in a function..

function masloadinf(){
var $grid = $('.grid').masonry({
ect ect ect.
}

And use it in

$(document).ready(function(){
masloadinf();
});

and

$('#filtro_immagini').on("change",function(){
$('.grid').infiniteScroll('destroy');
$('.grid').masonry('destroy');
$('.infinite-scroll').remove();
masloadinf();
});

In document.ready, all good, no problem,
But whet i change dropdown, I see items group just two times,
If I chege also, I see items group three times, four times and other...


I undestand that error is here...

**$grid.on( 'load.infiniteScroll', function( event, response ) {
console.log( response )
// parse response into JSON data
var data = JSON.parse( response );
// compile data into HTML
var itemsHTML = data.map( getItemHTML ).join('');
// convert HTML string into elements
var $items = $( itemsHTML );
// append item elements
$items.imagesLoaded( function() {
$grid.infiniteScroll( 'appendItems', $items )
.masonry( 'appended', $items );
})
});**

In fact, if I don't use function _masloadinf_ but copy code,
in document.ready all code and in on.change, commented
this code, all is fine.

I now ask what is the best solution to disable this code in on.change event
without copy all code, so keeping the function.

Thank you.

Start with the document.ready callback, the #filtro_immagini change handler, and the load.infiniteScroll listener inside masloadinf. Reproduce the repeated grouping after successive dropdown changes and compare initialization and listener counts. Done means identifying why repeated changes duplicate items and defining one supported initialization path without duplicated output.

Written by the indexing model from the issue text.