Implement Infinity.js with E-commerce catalogue

[Salmen]

Hi , i’m generating a catalogue with this php

<div id="product-list">
   <div class="row">
   <?php for($i=0; $i<50; $i++) : ?>
   <?php 
        $n = rand(1, 8);
        $m = 6;
 ?>

<div class="product-container col-lg-3 col-md-4 col-sm-4 col-xs-6">
    <a class="product-link" href="<?php echo base_url($site.'/'.$catalogue.'/'.$section.'/'.$n) ?>">

        <?php if(rand(1, 5) == 5) : ?>
            <span class="outofstocklabel label label-danger">Out of stock</span>
        <?php endif ?>

        <figure>
            <img src="<?php echo base_url('assets/img/catalogue/0'.$n.'/0'.$n.'-1.jpg') ?>" alt="" class="img-responsive" data-hover-link="<?php echo base_url('assets/img/catalogue/0'.$n.'/0'.$n.'-5.jpg') ?>">
            <figcaption class="product-caption text-center">
                <h3 class="text-uppercase bold">Saint Laurent</h3>
                <h4>Black Studded Lambskin</h4>
                <p  class="bold">
                    <span class="currency">&euro;</span>
                    <span class="price"><?php echo number_format(rand(90, 3500)) ?></span>
                </p>
            </figcaption>
        </figure>
    </a>
</div>
<?php endfor ?>
</div>
</div>

I’m using Airbnb Infinity.js to create the infinite scroll and my code:

var $newContent = $('.product-container');

var $el = $('#product-list .row');

 $el.empty();

var listView = new infinity.ListView($el);

$newContent.each(function(){
    listView.append( $(this) );
});

var listItems = listView.find('.product-container');

for(var index = 0, length = listItems.length; index < length; index++) {
     listItems[index].remove();
}

For now my code is not working correctly. When i start scroll the .product-container item sometimes disappear .