Как добавить номер счетчика в переменную и селектор по клику в jquery

Question

Я использую Rangelider. js в небольшом приложении, где пользователи могут добавлять новые разделы одним щелчком мыши. Я могу дублировать раздел, но мне нужно сделать переменную и селектор уникальными для нового раздела, чтобы заставить работать второй слайдер диапазона. Так как я могу сделать переменную и ее селектор, используемые для ползунка диапазона уникальными с каждым щелчком мыши.

var jQuerytsBlurSlider = jQuery('#text-s-blur-range');
var jQuerytsBlurAmount = jQuery('#text-s-blur-input');

jQuerytsBlurSlider
  .rangeslider({
    polyfill: false
  })
  .on('input', function() {
    jQuerytsBlurAmount[0].value = this.value;
  });

jQuerytsBlurAmount.on('input', function() {
  jQuerytsBlurSlider.val(this.value).change();
});

var shadowCount=1;

function addShadow() {

	shadowCount++;

	shadowDiv=document.getElementById("shadows-container");
	buttonsDiv=document.getElementById("shadow-buttons");
	
	nodeToClone=document.getElementById('shadow-container')
	nextShadowContainer=nodeToClone.cloneNode(true);
	nextTextShadowContainer=nodeToClone.cloneNode(true);
	nextShadowContainer.id="shadow-container"+shadowCount;
	nextTextShadowContainer.id="text-s-blur-range"+shadowCount;

	shadowDiv.insertBefore(nextShadowContainer, buttonsDiv);
	nextShadowContainer.childNodes[1].innerText="Shadow " + shadowCount;
	
	for (i=0; i<nextShadowContainer.childNodes.length; i++) {
		nextShadowContainer.childNodes[i].id=nextShadowContainer.childNodes[i].id +shadowCount;		
	}
	
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>

<div id="shadows-container">
  <div class="shadow-option" id="shadow-container">
    <h2>Shadow</h2>
    <div class="row" id="sh-blur">
      <label>Blur</label>
      <div class="flex">
        <div class="col-8">
          <div class="col-wrap">
            <input type="range" id="text-s-blur-range" value="0" min="0" max="100" />
          </div>
        </div>
        <div class="col-4">
          <div class="col-wrap">
            <input type="number" id="text-s-blur-input" value="0" min="0" max="100" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="shadow-buttons">
    <button class="repeat" onClick="addShadow()">Add Another</button>
  </div>
</div>

Answer 1

сначала вам нужно изменить все #id из вашего div, если вы хотите клонировать или повторить это .. он должен быть уникальным, поэтому класс лучше здесь. После этого вам нужно продублировать только контейнер и установить уникальный идентификатор. Затем создайте новый Rangelider и добавьте его к дублирующему контейнеру. И запустите init с правильным идентификатором слайдера
. Я не буду публиковать весь код, но посмотрю на примеры на codepen, я уверен, что вы будете вдохновлены ..

<div class="shadows-container" id="shadow-1">
<input type="range" class="text-s-blur-range">

Другая идея заключается в том, чтобы иметь какой-то скрытый дублирующий диапазонный слайдер и показывать каждый из них, если нажата кнопка «добавить тень»