I dynamically create sliders (to change color of text in input) and draggable input with some text. I don't know why, last created slider works with every input while any other slider is not working. How to solve this problem? Every single input has class coresponding to class of slider...
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type='text/css'>
html, body {
margin:0px;
padding:0px;
width:auto;
height:auto;
}
.container {
margin:20px;
}
.bl {
width:100px;
height:100px;
border-radius:10px;
display:block;
margin:5px;
float:left;
}
.mark:hover{ float:left; width: 50px; height: 50px; cursor: move; position: relative; left: 50px; background-image: url('cross.jpg'); background-repeat: no-repeat; border: 0px solid black; -webkit-opacity: 1; }
.mark{ float:left; width: 50px; height: 50px; padding-left: 30px; cursor: move; position: relative; left: 50px; background-image: url('cross.jpg'); background-repeat: no-repeat; border: 0px solid black; -webkit-opacity: 0.25; }
input { margin-left: 50px; height: 50px;}
.del {visibility: hidden;}
.mark:hover > .del {visibility: visible; cursor: pointer; position: relative; left: 35px; top: -50px; content: '*', font-weight: bold;}
.color_picker{ position: relative; float: right;}
#red1, #green1, #blue1,
#red2, #green2, #blue2,
#red3, #green3, #blue3,
#red4, #green4, #blue4,
#red5, #green5, #blue5,
#red6, #green6, #blue6,
#red7, #green7, #blue7 {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#red1, #red2, #red3 .ui-slider-range { background: #ef2929; !important }
#red1, #red2 .ui-slider-handle { border-color: #ef2929; }
#green1, #green2, #green3, #green4, #green5, #green6, #green7, #green8 .ui-slider-range { background: #8ae234; }
#green1, #green2, #green3, #green4, #green5, #green6, #green7, #green8 .ui-slider-handle { border-color: #8ae234; }
#blue1, #blue2, #blue3, #blue4, #blue5, #blue6, #blue7, #blue8 .ui-slider-range { background: #729fcf; }
#blue1, #blue2, #blue3, #blue4, #blue5, #blue6, #blue7, #blue8 .ui-slider-handle { border-color: #729fcf; }
</style>
<script>
$(document).ready(function () {
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
};
var i = 1;
$('.container').on('click', '.dodaj', function () {
$('<div class=mark ui-widget-content ><input type=text class="ui-state-active swatch'+i+'" value=This is input box><div class=del>*</div></div>').appendTo('.container').draggable();
$('<div id="red_val'+i+'">ss</div><div id="red'+i+'"></div><div id="green'+i+'"></div><div id="blue'+i+'"></div>').appendTo('.color_picker');
i++;
});
$(document).ready(function () {
var i = 0;
$('.container').on('click', '.dodaj', function () {
i++;
function refreshSwatch() {
var red = $( "#red"+i ).slider( "value" ),
green = $( "#green"+i ).slider( "value" ),
blue = $( "#blue"+i ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( ".swatch"+i ).css( "color", "#" + hex );
$( "#red_val"+i ).text( "#" + hex );
}
$(function() {
$("#red"+ i + ", #green"+i + ", #blue"+i).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$( "#red"+i ).slider( "value", 255 );
$( "#green"+i ).slider( "value", 140 );
$( "#blue"+i ).slider( "value", 60 );
});
});
});
$('.container').on('click', '.del', function () {
$(this).parent('.mark').css("visibility", "hidden");
});
});
$(document).ready(function edit() {
$('.container').on('click', '.ukryj', function x() {
$('.mark').css({"opacity":"1", "visibility":"hidden"});
$('.del').css("visibility","hidden");
$('.ui-state-active').css({"visibility":"visible", "border":"0px solid black"});
});
$('.container').on('click', '.pokaz', function () {
$('.mark').css({"opacity":"", "visibility":""});
$('.del').css("visibility","");
$('.ui-state-active').css({"visibility":"", "border":""});
});
$(".draggable").draggable();
$(".ui-state-active").resizable();
});
</script>
<body>
<div class="container">
<div class="dodaj">Add input</div> <div class="ukryj">Hide input</div> <div class="pokaz">Show</div>
<div class="color_picker"></div>
</div>
</body>
