Easy slider when set to numeric and duplicated on the same page causes the second carousels numbers to not function with highlight and auto rotate

Im using this plugin http://cssglobe.com/lab/easyslider1.7/02.html

I when I duplicate it on the same page the numbers for the second carousel will not highlight and the numbers from the second carousel are aligned to right edge of the first set of numbers that belong to the first carousel.

$(document).ready(function(){   

    $("#slider").easySlider({
        auto: true, 
        numeric: true

    });


    $("#slider2").easySlider({
        auto: true, 
        numeric: true

    });


}); 

<div id="slider">
    <ul>                
        <li>
          <div style="position:relative">
                    <div style="position:absolute;  height:200px; width:200px; background-color:#009;">    
                        sasasa
                    </div>


                        <a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a>

            </div>
        </li>
        <li>&开发者_如何学Clt;a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
    </ul>
</div>

<br /><br />


<div id="slider2">
    <ul>                
        <li>
          <div style="position:relative">
                    <div style="position:absolute;  height:200px; width:200px; background-color:#009;">    
                        sasasa
                    </div>


                        <a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a>

            </div>
        </li>
        <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
        <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
    </ul>
</div>

---

Try assigning a numericId in the options for the second one so that the controls will have separate ids from the first one's controls and therefore can be separated, as well as validated. Like this:

$(document).ready(function(){   

    $("#slider").easySlider({
        auto: true, 
        numeric: true

    });


    $("#slider2").easySlider({
        auto: true, 
        numeric: true
        numericId: 'second'
    });


});