change slider value dynamically

Question

I am using bootstrap slider and creating slider controls dynamically in a group of three (Easy,Medium,Hard). I want to change the max value of the remaining two sliders dynamically. Total values of all three sliders in a group should not exceed 100. I can't seem to think of anything as all the sliders have same class. Any idea how to achieve this.?

Here is a jsfiddle link : https://jsfiddle.net/sqj1djyv/1/

HTML:

<div class="container">
Container 1
<div class="container" style="padding:20px">
Easy: 
<input class="slider" name="easy[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Medium: 
<input class="slider" name="medium[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Hard: 
<input class="slider" name="hard[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
</div>

<div class="container">
Container 2
<div class="container" style="padding:20px">
Easy: 
<input class="slider" name="easy[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Medium:
<input class="slider" name="medium[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
<div class="container" style="padding:20px">
Hard: 
<input class="slider" name="hard[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/>
</div>
</div>

JQuery:

$("input.slider").slider({
    tooltip:'always'
});

Answer 1

You could use :nth-child() to target the correct slider. Something like

$('container:nth-child(2)').attr('name', dynamicNameValue);

You'd probably want to add an additional class to the container values though so you could target each slider separately. containerTop something like that.