Fade in newly loaded divs incrementally using ajax and append

I am using AJAX inside WordPress to load my pages as an infinite scroll. I am having no issues there, all is working good. On the initial page load, I am running this script to fade in the initial blocks:

$('.item').each(function(i) {
     $(this).css('opacity', 0);
     $(this).delay((i++) * 100).fadeTo(1000, 1); 
})

That is working as it should. So here’s the dilemma. Since I am using AJAX to load more content on scroll, it is not picking up this piece of code. So I am using this code to fade in each item incrementally inside the AJAX.

success: function(html){
    $(html).hide().appendTo('#main-results');

    $('.item').each(function(i) {
        $(this).delay((i++) * 100).fadeTo(500, 1); 
    })
}

What is happening is that once the new content loads, it starts the fade from the very first block. Since those blocks are already loaded and at 100% opacity, you don’t see them loading in. So there is a “delay” of sorts to when the newly loaded content begins to fade in.

This is not the result needed (hence why I am posting here), I would like to have it so only the newly loaded content blocks incrementally fade in. Any assistance or suggestions would be greatly appreciated.