Como generar una acción global según enumeración

Bueno antes que nada perdón si el titulo no es tan explicito pero no sabia bien como ponerle a este problema.
La cuestión es que estoy usando el TinyScroll para mi sitio y me encontre que cuando quize utilizarlo más de una vez, no podia, por lo que me di cuenta y perdón si como lo hago no es correcto pero por eso estoy preguntando como resolverlo, que variando el siguiente codigo de javascript y el css:

Código Javascript :

   <script type="text/javascript">
    var sb = jQuery.noConflict();
      sb(document).ready(function(){
         sb('#scrollbar1').tinyscrollbar();
      });
   </script>

Código :

#scrollbar1 { width:31em; margin: 0em 0em 0.625em; }
#scrollbar1 .viewport { width: 30em; height: 20em; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0.5em; top: 0; padding: 0; margin: 0; }

De esta manera tantos scrolls use, solo así me funcionan:

Código Javascript :

   <script type="text/javascript">
    var sb = jQuery.noConflict();
      sb(document).ready(function(){
         sb('#scrollbar1').tinyscrollbar();
                        sb('#scrollbar2').tinyscrollbar();
                        sb('#scrollbar3').tinyscrollbar();
      });
   </script>

Código :

#scrollbar1 { width:31em; margin: 0em 0em 0.625em; }
#scrollbar1 .viewport { width: 30em; height: 20em; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0.5em; top: 0; padding: 0; margin: 0; }

#scrollbar2 { width:31em; margin: 0em 0em 0.625em; }
#scrollbar2 .viewport { width: 30em; height: 20em; overflow: hidden; position: relative; }
#scrollbar2 .overview { list-style: none; position: absolute; left: 0.5em; top: 0; padding: 0; margin: 0; }

#scrollbar3 { width:31em; margin: 0em 0em 0.625em; }
#scrollbar3 .viewport { width: 30em; height: 20em; overflow: hidden; position: relative; }
#scrollbar3 .overview { list-style: none; position: absolute; left: 0.5em; top: 0; padding: 0; margin: 0; }

Entonces mi pregunta es como puedo darle una variable que sea el número que sea el scroll y su css funcione sin tener que hacer esto por cada uno que creo.

Bueno perdón de nuevo si no fui claro.
Gracias

Usa clases en vez de ID's para los etilos

Código Javascript :

<script type="text/javascript">
   var sb = jQuery.noConflict();
   sb(document).ready(function(){
      sb('#scrollbar1').tinyscrollbar().addClass('scrollbar');
      sb('#scrollbar2').tinyscrollbar().addClass('scrollbar');
      sb('#scrollbar3').tinyscrollbar().addClass('scrollbar');
   });
</script>

Código :

.scrollbar {
   width:31em;
   margin: 0em 0em 0.625em;
}
.scrollbar .viewport {
   width: 30em;
   height: 20em;
   overflow: hidden;
   position: relative;
}
.scrollbar .overview {
   list-style: none;
   position: absolute;
   left: 0.5em;
   top: 0;
   padding: 0;
   margin: 0; 
}

Espro te sirva, un saludo

Hola Abdcuted, gracias por la ayuda pero lo probe y no me funciona, tengo este codigo por ejemplo:

Código :

<div id="scrollbar2">
      <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div><div class="viewport">
   <div class="overview">
                        TEXT MUESTRA
   </div></div></div>   
</div>

La cuestion es que necesito identificar con un "ID" la div principal del Scroll para diferenciarla de otros, sino no me funciona, pero después si uso las "class" y solamente dejando el codigo css como puse arriba me funciona, si lo dejo como me ejemplificaste vos no hay caso.
Sigo haciendo algo mal o que puede ser?
Gracias de nuevo

Hey!

Mira, esta es la estructura de lo que has puesto y le sobra un div.

Código HTML :

<div id="scrollbar2">
   <div class="scrollbar">
      <div class="track">
         <div class="thumb">
            <div class="end">
            </div>
         </div>
      </div>
   </div>
   <div class="viewport">
      <div class="overview">
         TEXT MUESTRA
      </div>
   </div>
</div>

//te sobra este cierre de div
</div>

Esta última intrucción que he añadido detrás de cada tinyscrollbar().

Código Javascript :

[addClass('scrollbar')

está añadiendo la clase scrollbar a tus scrollbars, el problema es que como veo la clase scrollbar ya la estabas usando, pero vamos que le hubieras puesto otro nombre, si por ejemplo lo pusieras así:

Código Javascript :

addClass('miScrlPerso')

entonces está línea

Código HTML :

<div id="scrollbar2" class="scrollbar">

Saldría así

Código HTML :

<div id="scrollbar2" class="miScrlPerso">

Y con cambiar el nombre de las clases en el css te debería funcionar pues ya no tiene conflicto con otras clases
Ejemplo:

Código :

//Las cabeceras antes eran:
.scrollbar {
.scrollbar .viewport {
.scrollbar .overview {
//Y ahora serían
.miScrlPerso {
.miScrlPerso .viewport {
.miScrlPerso .overview {

Y tiene que funcionar, por que aunque tu 3 sliders mantienen su ID independiente, están recibiendo los estilos desde su nueva clase miScrlPerso.

Un saludo.