multiple dynamically created jquery slider galleries on one page

multiple dynamically created jquery slider galleries on one page

I am trying to create a page where the user can add jquery slider
galleries to a page on the click of a button.
I have nearly got it working but am having problems with the rotation of
the images on the additional sliders when there are more than one.
I have created a jsfiddle to demonstrate http://jsfiddle.net/UUKP4/26/
the additional sliders only loop round once and then stop
any help greatly appreciated.
code for fiddle
css:
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
jscript
var i;
var topplus=50;
function buildslider(i, id, content) {
id = id + i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.style.position = "absolute";
newdiv.style.top = +topplus + "px";
newdiv.style.left = +topplus + "px";
newdiv.style.display = 'inline-block';
newdiv.style.width = '320px';
newdiv.style.height = '270px';
newdiv.innerHTML = content;
document.getElementById("content").appendChild(newdiv);
topplus=topplus+150;
function slideSwitch() {
var $active = $('#' + id + ' #slide_image.active');
if ($active.length === 0) $active = $('#' + id + '
#slide_image:last');
var $next = $active.next().length ? $active.next() : $('#' +
id + ' #slide_image:first');
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval(slideSwitch, 3000);
});
i++;
}
function addSlider() {
buildslider('i', 'draggable', '<div id="slideshow"><img
id="slide_image"
src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg"
class="active" /><img id="slide_image"
src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img
id="slide_image"
src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg"
/></div>');
}
HTML
<input type='button' value='add slider' id='addSlider'
onclick='addSlider();'>