Jquery: control multiple news ticker

Question

I am working with jQuery news ticker plugin. And it worked fine, but when I put multiple news ticker in my page, news ticker control(start,stop,next/pre) not work. when i click in control 1, this control worked with all news ticker box, But in need to worked control for each box. i.e: control1 for box1, control2 for box2. how to fix this? ONLINE DEMO (in action please click in first controlbar.)

HTML:

<ul id="vertical-ticker">
            <li>One Time</li>
            <li>Baby</li>
            <li>One Less Lonely Girl</li>
            <li>Somebody to Love</li>
            <li>Eenie Meenie</li>
            <li>Never Say Never</li>
            <li>U Smile</li>
</ul>
<p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>
<ul id="vertical-ticker1">
            <li>One Time</li>
            <li>Baby</li>
            <li>One Less Lonely Girl</li>
            <li>Somebody to Love</li>
            <li>Eenie Meenie</li>
            <li>Never Say Never</li>
            <li>U Smile</li>
</ul>
    <p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>

JQUERY:

$(function(){
            $('#vertical-ticker').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next',
                previous    :   '#ticker-previous',
                stop        :   '#stop',
                start       :   '#start',
                mousestop   :   true,
            });
        });
$(function(){
            $('#vertical-ticker1').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next',
                previous    :   '#ticker-previous',
                stop        :   '#stop',
                start       :   '#start',
                mousestop   :   true,
            });
        });

Answer 1

You have duplicate id's like #ticker-next, #start, #stop, etc. Those need to be unique both in the HTML and in the jQuery object map.

Answer 2

Change the ids of the start buttons, there should be different ids for start button for each of the newsticker.

$(function(){
            $('#vertical-ticker').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next',
                previous    :   '#ticker-previous',
                stop        :   '#stop',
                start       :   '#start',
                mousestop   :   true,
            });
        });
$(function(){
            $('#vertical-ticker1').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next2',
                previous    :   '#ticker-previous2',
                stop        :   '#stop2',
                start       :   '#start2',
                mousestop   :   true,
            });
        });

Answer 3

You should change #vertical-ticker1 and ticker-previous1 and #ticker-next1 and #start and #stop too.

jsfiddle Live Demo

JavaScript

$(function(){
        $('#vertical-ticker1').totemticker({
            row_height  :   '100px',
            next        :   '#ticker-next1',
            previous    :   '#ticker-previous1',
            stop        :   '#stop1',
            start       :   '#start1',
            mousestop   :   true,
        });
    });

HTML

<p><a href="#" id="ticker-previous1">Previous</a> / <a href="#" id="ticker-next1">Next</a> / <a id="stop1" href="#">Stop</a> / <a id="start1" href="#">Start</a></p>