jQuery - Get Dynamic (*) Element By Id and put on array

I'm working to create a classifieds site. On the search page will be presented multiple products cards. Each product card can have more than one image. When that happens, I will uses a slider.

To build this slider, I'm using a jquery library (bxslider). The application is based on WordPress.

So far, everything was going well. Cards and slider working. But when I have more than one card (post), the slider controls change the position on all cards. Of course, since the selector is the same for everyone.

Then I added the post ID to the ID selector, making every single card. But now must do jQuery understand that there are several unique cards for him to apply the function that creates the slides within each card.

My PHP Code

<?php 
    $id = get_the_ID(); 
?>
">
    ID, 'vdw_gallery_id', true); 
        foreach ($images as $image) { ?>
            

                

                    ">
                
            </li>
        <?php }
    ?>
</div>

My jQuery

(function( $ ){
    $.fn.sliderID = function() {
        var sliders = [];
        sliders = $('[idˆ=card-slider-]').length;
        console.log('sliders ids', sliders);
    };
})( jQuery );

$(document).ready(function(){
    $.fn.sliderID();
});