Jquery Sliders: Only Last Slider Working On Page With Multiple Sliders

I'm making a page with multiple sliders, where the number of sliders and the options are different based on the user. I'm having a problem where all of the sliders are created and

Solution 1:

The problem is that you are replacing inner html in each loop iteration. In each loop iteration you:

1. create 2 new divs,
2. replace the<div id="sliders">inner html
3. and then initialize the jquery-ui slider on the new div.

The problem is in step 2. Because you are replacing inner html (you are replacing DOM elements), all events binded by jquery-ui are lost on the next loop iteration. Thus only, slider initialized on last iteration works.

Have a look in this jsFiddle in which jQuery .append() function is used instead of innerHTML :

$('#sliders').append(html);

With .append() you add only new elements to the DOM, not replacing all the existing one in the <div id="sliders">