динамическое изменение значения ползунка

Question

Я использую слайдер начальной загрузки и динамически создаю ползунок в группе из трех (Easy, Medium, Hard). Я хочу динамически изменять максимальное значение остальных двух ползунков. Общие значения всех трех ползунков в группе не должны превышать 100. Я не могу ни о чем думать, поскольку все слайдеры имеют один и тот же класс. Любая идея, как добиться этого.?

Вот jsfiddle ссылка: 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

Вы можете использовать :nth-child() целевой правильный ползунок. Что-то вроде

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

Вы, вероятно, хотите, чтобы добавить дополнительный класс к значениям контейнера, хотя, чтобы вы могли предназначаться бегунка отдельно. containerTop что-то в этом роде.