如何将2 jScrollPane添加到我的页面,每个都有不同的CSS？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.4.2/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.4.2/style/jquery.jscrollpane.min.css">

<div id="scrollPane1" class="custom-scroll-pane"></div>
<div id="scrollPane2" class="custom-scroll-pane"></div>

.custom-scroll-pane {
  width: 300px;
  height: 200px;
  overflow: auto;
  /* 添加其他自定义样式 */
}

.custom-scroll-pane#scrollPane1 {
  /* 添加第一个JScrollPane的特定样式 */
}

.custom-scroll-pane#scrollPane2 {
  /* 添加第二个JScrollPane的特定样式 */
}

$(document).ready(function() {
  // 将第一个容器元素转换为JScrollPane，并应用特定的CSS类
  $('#scrollPane1').jScrollPane({
    // 添加其他自定义选项
  }).addClass('custom-scroll-pane#scrollPane1');

  // 将第二个容器元素转换为JScrollPane，并应用特定的CSS类
  $('#scrollPane2').jScrollPane({
    // 添加其他自定义选项
  }).addClass('custom-scroll-pane#scrollPane2');
});