javascript - Not choosing existing selection when randomising -

i have created speech bubble displays quotes store in lists. when click bubble picks quote list @ random, chooses 1 displaying. how prevent doing this?

<ul class="joke-list">     <li id="quotes">         <span style="color: rgb(0, 0, 0);"><span style="font-size: medium;">charles darwin wanted doctor did not sight of blood.</span></span></li>     <li id="quotes">         <span style="color: rgb(0, 0, 0);"><span style="font-size: medium;">charles darwin member of gourmet club. ate lots of animals including armadillos, owls , tigers.</span></span></li>     <li id="quotes">         <span style="color: rgb(0, 0, 0);"><span style="font-size: medium;">for 25th birthday, charles darwin had mountain named after him in zimbabwe. </span></span></li> </ul> 

fiddle: http://jsfiddle.net/fsjkm/236/

this should fix it

$.fn.extend({     rnditem : function(l) {         var current = $(this).text(),             next = (l.eq(math.floor(math.random() * l.length)).text());         while (next === current) {            next = (l.eq(math.floor(math.random() * l.length)).text());        }  $(this).text(next);        return this;    }  });  $(document).ready(function () {     var list = $(".joke-list").find("#quotes");  $(document.body).on('click','.speech', function () {  $(this).rnditem(list);    });  $(".speech").trigger("click");  }); 

on jsfiddle

in answer additional question below, solution be

$.fn.extend({    rnditem : function(l) {         var = [],             current = $(this).text().trim(),             index,             next;         array.prototype.foreach.call(l, function(item) {             a.push($(item).text().trim());        });         index = a.indexof(current) + 1;        if (index < 0 ||  index >= l.length) {            index = 0;        }         next = (l.eq(index).text());         $(this).text(next);        return this;    }  }); 

on jsfiddle