Double cloned on button click

[nadiam]

hello. so to keep it short and simple. I have a button "Cloned" and an <img>. The problem is that the image gets double cloned on the second, third and so on when Cloned button is clicked. Like on the first click image gets cloned and displayed once, on the second click 2 of the image gets displayed instead of one which would now equal to having 3 of the image. On the third click 4 of the image is cloned instead of 1 so now i have alot of the images on just 3 clicks. it is my cloning jquery that is creating this mess and not sure how to fix it.

    <script type="text/javascript">
        $(document).ready(function(){
            $(".8r").hide();
            $(".8s").live("click", function(){
                var R8seats = $(".8r").clone();
                var element = $(".arrangement-main");
                element.append(R8seats);
                R8seats.show();
            });
        });
    </script>
    <input type="button" class="8s" value="Cloned">
    <img src="img/8r.jpg" width="400" height="200" class="8r">

im using jquery to hide the img because display:none hides it thoroughly and doesn't show it when append. arrangement-main is just an empty div to place the img. yes, im using an old version of js 1.8, will upgrade soon.

[noelthefish]

Try changing line 5

var R8seats = $(".8r").clone();

to

var R8seats = $(".8r:first").clone();

Otherwise you are cloning all images with a class of 8r.

[nadiam]

oh right.. didn't think about that. thank you!