How to attach multiple scroll events on different divs in JavaScript / jQuery?

I need to load dynamically data on scroll event but my data is grouped in different tables. If the number of rows returned from AJAX call is grater than some limit, overflow and height is added to that table.

At document loading I only fetch and populate table title which represent different groups. On first click on a group title a chunk of data (table rows <tr>) is loaded and displayed on the page.

So I need to keep track if the cursor is over some table and than to trigger the scroll event. Here is some code and structure :

// allGroups holds the ids of all the groups
allGroups = [435,56,34,23,452];

$(document).ready(function () {

$.each(allGroups, function(ind, value){

    var item = $('#POI_data_' + value);

    item.on('mouseenter',function(){

        item.on('scroll',function(){
            // fetch new data
        });

    });
    item.on('mouseleave', function(){

        item.off('scroll');
    });
});
});

table structure:

<div id="POI_data_<?php echo $poiRow['id'] ?>">
    <table >
        <!-- FETCH NEW DATA -->
    </table>
</div>

My problem is when mouseenter event triggers on another table, the scroll event is not properly triggered.