add multiple scrollbar in a same page using perfect-scrollbar plugin

Question

I have used perfect-scrollbar js plugin. scrollbar works fine. But when I add this scrollbar again for a another content(same page), it doesn't work for second div. How do I add multiple scrollbar in a same page using this plugin?

JS

jQuery(document).ready(function ($) {
      "use strict";
      $('#Default').perfectScrollbar();
    });

CSS

#Default.contentHolder { position:relative; margin:0px auto; margin-top: 20px; padding:0px; width: 285px; height: 450px; overflow: hidden; border: 1px solid #CCC; }

HTML

<div id="Default" class="contentHolder">
/*content goes here. scrollbar works fine here */
</div>

 <div id="Default" class="contentHolder">
    /*another content goes here. scrollbar does not work here*/
 </div>

Answer 1

1. Your HTML is invalid. You cannot have same ID on multiple elements.

2. Use Classes for assigning the plugin. For example:

   $('.contentHolder').perfectScrollbar();
   

or you can also use .each loop if it doesn't work. For example:

$('.contentHolder').each(function(){
    $(this).perfectScrollbar();
});

Answer 2

For latest version use this

$('.dialogInner').each(function(){ const ps = new PerfectScrollbar($(this)[0]); });

https://github.com/utatti/perfect-scrollbar/issues/246#issuecomment-356918832

Answer 3

$('.contentHolder').each((index, element) => {
    new PerfectScrollbar(element);
});