HTML data attributes and jQuery

HTML data attributes and jQuery

Okay, so I'm building a portfolio plugin for WordPress. Users will be able
to insert a shortcode into their content and display a portfolio.
Each Portfolio will use jQuery Isotope, with custom settings for each one.
I want to be able to display multiple portfolios on one page, and have
their respective Isotope jQuery arguments initialized.
So I went about adding data attributes with the settings to each portfolio
container, with a common class on each of them.
Then I set up a JS file with the following (simplified):
var $container = jQuery('.portfolio-listing');
var $eachContainer = jQuery('#' + $container.data('portfolio-id'));
$eachContainer.imagesLoaded( function(){
$eachContainer.isotope({
// options
itemSelector : '.portfolio-item.item-' +
$eachContainer.data('portfolio-id'),
layoutMode : $eachContainer.data('layout'),
});
});
And here's my HTML (simplified):
<div id="test" class="portfolio-listing" data-layout="masonry"
data-portfolio-id="test">
<div class="portfolio-item item-test">
... inner portfolio stuff
</div>
</div>
This results in the first portfolio on the page getting the correct
arguments, and then the rest of them just mimicking the first portfolio's
arguments.
Anyone have any ideas for me?