How change 'rel' parameter to Photoset-grid?

I use photoset-grid: http://stylehatch.github.io/photoset-grid/ to tumblr blog. Code:

<body>
<div class="wrapper">
{block:IndexPage}
    <ul id="posts">
        {block:Posts}
            <li>
                {block:Photoset}
                    <div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" style="visibility: hidden;">
                        {block:Photos}
                            <img src="{PhotoURL-500}"
                            {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
                            {block:Caption}alt="{Caption}"{/block:Caption} />
                        {/block:Photos}
                    </div>
                    {block:Caption}
                        {Caption}
                    {/block:Caption}
                {/block:Photoset}
            </li>
        {/block:Posts}
    </ul>
{/block:IndexPage}
</div>

<script type="text/javascript">
$('.photoset-grid').photosetGrid({
  highresLinks: true,
  rel: $('.photoset-grid').attr("data-id"),
  gutter: '10px',

  onComplete: function(){
    $('.photoset-grid').attr('style', '');
    $('.photoset-grid a').colorbox({
      photo: true,
      scalePhotos: true,
      maxHeight:'90%',
      maxWidth:'90%'
    });
  }
});
</script>
</body>

Problem: Not change 'rel' parameter in 'photosetGrid' for different sets of pictures. How it looks on the website:

First post:

<div class="photoset-grid" data-layout="122" data-id="photoset58370010471" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 390px;">
<a href = "bla0.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%; ">

Second post:

<div class="photoset-grid" data-layout="122" data-id="photoset58327675703" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 468px;">
<a href = "bla1.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%;">

The parameter 'data-id' in changing, and the parameter 'rel' in remains the same.

How to make the parameter 'rel' in varied with 'data-id' in ?

That is, to sets of pictures in different posts have different identifiers and were not a collection.

Thank you!

+++Desicion+++

<script type="text/javascript">
        $.each($('.photoset-grid'), function() { 
            $(this).photosetGrid({
              highresLinks: true,
              rel: $(this).attr('data-id'),
              gutter: '10px',

              onComplete: function(){
                $('.photoset-grid').attr('style', '');
                $('.photoset-grid a').colorbox({
                    photo: true
                });
              }
            }); 
        });
    </script>

Solution

The problem is coming from the fact that you're calling the photosetGrid() function at the same time to multiple selected elements. You need to utilize jQuery's each() function to iterate over the elements.