prependTo adds 2 list items instead of 1

Question

I have a carrousel with a .pre and .next button. A click on .pre moves the li:last to li:first, and the other way around.

This works fine if there is only one carrousel, when i add 2 carrousels with a different ID a click on .pre adds 2 li's to the front instead of 1. Why is that?

        <div class="carrousel" id="featuredAppartments">

            <a href="" class="move pre">Previous</a> <a href="" class="move next ">Next</a>

            <div class="list">
                <ul>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonLowered">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonRented">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                </ul>
            </div>

            <script>

                $(document).ready(function() {

                    var t = $('#featuredAppartments ul');

                    $('.next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
                    $('.pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

                });

            </script>

        </div>

UPDATE:

I changed the script to this, but the second carousel still adds 2 li's instead of just 1.

            <script>

                $(document).ready(function() {

                    var t = $('#featuredAppartments ul');

                    $('#featuredAppartments .next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
                    $('#featuredAppartments .pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

                });

            </script>

Answer 1

The answer to this question lies in your code for the second carousel which you didn't provide.. I just made a jsfiddle very quickly from your code. It's not having any good markup so I would recommend to rewrite it. http://jsfiddle.net/PQQEe/

Basically you probably forgot to change some variables appropriately.. like your t.find..

Lets say the 2nd carrousel has the id "more". So your JS would look like:

$(document).ready(function() {
    var t = $('#featuredAppartments ul');

    $('#featuredAppartments .next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
    $('#featuredAppartments .pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

    var d = $('#more ul');

    $('#more .next').click(function(event) {event.preventDefault();d.find('li:first').appendTo(d);});
    $('#more .pre').click(function(event) {event.preventDefault();d.find('li:last').prependTo(d);});

});

You now select the buttons by the carousel ID and you also only access the list within each carousel. Hope it helps.

Answer 2

Your code says $('.pre'), which will attach the click handler to every element with the pre class set. So when the user clicks once, both carousels respond, and each adds its own li.

You'll want to make your selector more specific, or your handler...