gallery bxslider thumbnails (id="bx-pager") bug when having few galleries in the articles list view

I have found a bug in the field gallery when using "Template in the articles list view" -> full-bxslider.com.php

When you want to see few galleries in the list view the thumbnails of the second gallery doesn't work.. when you click on them they just redirects to home page, and not changes the slide. That's happens because of the duplicate value of id="bx-pager" and javascript fails.

For the fast fix I can share my template code with fixed issue: temlpate: full-bxslider.com.php

<?php
/**
 * Cobalt by MintJoomla
 * a component for Joomla! 1.7 - 2.5 CMS ( http://www.joomla.org )
 * Author Website:  http://www.mintjoomla.com/ 
 * @copyright Copyright (C) 2012 MintJoomla ( http://www.mintjoomla.com ). All rights reserved.
 * @license   GNU/GPL  http://www.gnu.org/copyleft/gpl.html 
 */
defined('_JEXEC') or die();

if(empty($this->value))
{
    return null;
}

if(isset($_POST["gallery_counter"])){
    $_POST["gallery_counter"]++;
}else{
    $_POST["gallery_counter"] = 1;
    JFactory::getDocument()->addScript(JUri::root(TRUE) . '/components/com_cobalt/fields/gallery/bxslider/jquery.bxslider.min.js');
    JFactory::getDocument()->addStyleSheet(JUri::root(TRUE) . '/components/com_cobalt/fields/gallery/bxslider/jquery.bxslider.css');
}

$key = $this->id . '-' . $record->id;
$dir = JComponentHelper::getParams('com_cobalt')->get('general_upload') . DIRECTORY_SEPARATOR . $this->params->get('params.subfolder', $this->field_type) . DIRECTORY_SEPARATOR;
?>
    <style type="text/css">
        [id|=bx-pager] {
            margin-top: -61px;
        }
        [id|=bx-pager] a {
            margin-bottom: 5px;
        }
        [id|=bx-pager] a.active img {
            background-color: #E8D2FF;
            border-color: #4A1086;
        }
        .bx-controls-auto {
            text-align: right;
        }
    </style>
    <div id="galleria<?php echo $key?>">
        <?php
        foreach ($this->value as $picture_index => $file)
        {
            $picture = $dir . $file['fullpath'];
            $url     = CImgHelper::getThumb($picture, $this->params->get('params.full_width', 100), $this->params->get('params.full_height', 100), 'gallery' . $key, $record->user_id,
                array(
                     'mode'       => $this->params->get('params.full_mode', 6),
                     'strache'    => $this->params->get('params.full_stretch', 1),
                     'background' => $this->params->get('params.thumbs_background_color', "#000000"),
                     'quality'    => $this->params->get('params.full_quality', 80)
                ));
            echo '<div class="slide"><img src="' . $url . '"></div>';
        }
        ?>
    </div>
    <div id="bx-pager-<?php echo $_POST["gallery_counter"];?>">
        <?php
        foreach ($this->value as $picture_index => $file)
        {
            $picture = $dir . $file['fullpath'];
            $url     = CImgHelper::getThumb($picture, 86, 60, 'gallery' . $key, $record->user_id,
                array(
                     'mode'       => 1,
                     'strache'    => 1,
                     'background' => $this->params->get('params.thumbs_background_color', "#000000"),
                     'quality'    => 80
                ));
            echo '<a data-slide-index="'.$picture_index.'" href="/"><img class="img-circle img-polaroid" src="' . $url . '"></a>';
        }
        ?>
    </div>

    <script type="text/javascript">
        jQuery('#galleria<?php echo $key?>').bxSlider({mode: 'fade', auto: true, autoControls: false, adaptiveHeight: true, pagerCustom: '#bx-pager-<?php echo $_POST["gallery_counter"];?>'});
    </script>


<?php if ($this->params->get('params.download_all', 0) == 1): ?>
    <div class="clearfix"></div>
    <a class="btn btn-success" href="/<?php echo Url::task('files.download&fid=' . $this->id . '&rid=' . $record->id, 0); ?>">
        <?php echo JText::_('CDOWNLOADALL') ?>
    </a>
<?php endif; ?>