Safari/touchscreen issue with jQuery custom sliding function

Safari/touchscreen issue with jQuery custom sliding function

I am using a premade short jQuery code for a slider to use a special
offer. Here is the jQuery code for the slider:
$(function() {
$(".slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 170) {
$well = $(this).closest('.well'); //Select only the
respective well element.
$well.fadeOut(500, function(){
$well.delay(1000).addClass( "disappear" );
$well.prev(".showup").delay(500).removeClass( "disappear" );
});
} else {
// Apparently Safari isn't allowing partial opacity on text
with background clip? Not sure.
// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
}
},
stop: function(event, ui) {
if (ui.position.left < 171) {
$(this).animate({
left: 0
})
}
}
});
$('.slider')[0].addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
curX = touch.pageX - this.offsetLeft - 40;
if(curX <= 0) return;
if(curX > 200){
$well = $(this).closest('.well'); //Select only the respective
well element.
$well.fadeOut();
$well.addClass( "disappear" );
$well.add('<h2>Erbjudandet använt</h2>');
}
el.style.webkitTransform = 'translateX(' + curX + 'px)';
}, false);
$('.slider')[0].addEventListener('touchend', function(event) {
this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
this.addEventListener( 'webkitTransitionEnd', function( event ) {
this.style.webkitTransition = 'none'; }, false );
this.style.webkitTransform = 'translateX(0px)';
}, false);
});
The HTML for displaying the slider is as such:
return "<link rel='stylesheet'
href='http://www.infid.se/wp-content/themes/simplemarket/anvandstyle.css'>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script
src='http://www.infid.se/wp-content/themes/simplemarket/slidetounlock.js'></script>
<div id='page-wrap'>
<div class='showup disappear'><h2>Erbjudande använt</h2></div>
<div class='well'>
<h2><strong class='slider'></strong> <span>Använd
erbjudande</span></h2>
</div>
</div>";
And here is the relevant CSS:
.disappear:before {content: "<h2 style='color:#101010;'>Erbjudande
använt</h2>";}
.disappear{display:none;}
The problem with this code is when I add multiple instances of the slider.
It works fine on my computer (1440px width), but when I use it on my
iPhone I can only select one. Just any point in the right direction would
be good, for example if the problem is with the slider or the device. A
working instance can be found here: http://infid.se/mandag/.