I'm using jQuery and jQuery UI to dynamically build sliders based on a user configured number. However I am having trouble in that when I create the sliders it seems that it makes all of them into whatever the last one that was made was. For instance I have eight sliders and each one, when it is slid, changes the value of a corresponding text area to whatever I need it to be. Right now however all of the sliders change the eighth text area instead of their corresponding one.

Code:

```
function buildSliders() {

 for(b = 0; b < bankCount; b ++)
 {
    $( "#slider"+b ).slider({
     value:20,
     min: 0,
     max: 254,
     step: 1,
     change: function( event, ui ) {
      sendDimCommand(b);
     }
    });
 }
};

function sendDimCommand(dimmerChannel) {
 var targetChannel = "sliderValue"+dimmerChannel;
 alert(targetChannel);
 document.getElementById(targetChannel).innerHTML = "blue";
}

```

I'm pretty sure there is a way around this, and I've looked into things like .clone and .each however they are unfamiliar concepts to me and I don't know how or if they would work. As you can see the functions are when the slide value has been changed are all pretty similar, they only have to change the target.

Any help would be appreaciated, thanks.

\*\*EDIT

Here's the code I used to solve this:

function buildSliders() {

```
 for(b = 0; b < bankCount; b ++)
 {
    $( "#slider"+b ).slider({
     value:20,
     min: 0,
     max: 254,
     step: 1,
     change: function( event, ui ) {
      sendDimCommand(this.attributes["value"].value);
     }
    });
 }
};

function sendDimCommand(dimmerChannel) {
 var targetChannel = "sliderValue"+dimmerChannel;
 alert(targetChannel);
 $( "#"+targetChannel ).text($( "#slider"+dimmerChannel ).slider( "value" ) )
}

```

When I crate the divs:

```
for(r = 0; r < bankCount; r ++)
{
    var trTag = document.createElement("tr");
 tableTag.appendChild(trTag);
 var sliderLabelTag = document.createElement("td");
 sliderLabelTag.className = "RelayLabel";
 sliderLabelTag.colSpan= 2;
 sliderLabelTag.innerHTML = relayNames[r] + ": Slider Value";
 trTag.appendChild(sliderLabelTag);

 var sliderValueTag = document.createElement("td");
 sliderValueTag.id = "sliderValue" + r;
 sliderValueTag.innerHTML = "Waiting to Query";
 trTag.appendChild(sliderValueTag);

    var trTag = document.createElement("tr");
 tableTag.appendChild(trTag);
 var sliderCell = document.createElement("td");
 sliderCell.id = "Slider" + r;
 sliderCell.className = "sliderCell";
 sliderCell.colSpan = 3;
 sliderCell.innerHTML = "<div id=\"slider" + r + "\" value=\"" + r + "\" class=\"" + r + "\" name=\"" + r + "\"></div>";
 trTag.appendChild(sliderCell);
}

```