jQuery - Добавить номер приращения ко всем входам при клонировании

Question

Я пытаюсь клонировать каждый .item, у которого есть несколько input, которым нужен собственный уникальный идентификатор. Есть ли способ автоматически назначать _(num) каждому input и label для каждого нового клона без вызова имени класса или идентификатора?

Каждый вход id должен совпадать с его меткой с одинаковым именем.

$("button").click(function() {
  var $div = $('div[id^="item"]:last');
  var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
  $("#item")
    .clone()
    .appendTo($(".list")).prop("id", "item_" + num);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click">CLICK TO CLONE</button>

<div class="list">
  <div class="item" id="item">
    <label for="box">checkbox
  <input id="box" type="checkbox">
</label>
    <label for="toggle">
  <input id="toggle" type="input" value="search">
</label>
  </div>
</div>

Answer 1

Поздний ответ на вечеринку.

Во-первых, этот код

var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;

Forever генерирует NaN , потому что начальный идентификатор - это 'item', который не соответствует регулярному выражению и, конечно, NaN + 1 = NaN.

В любом случае, я не вижу способа достичь желаемого результата с помощью цепочки, но вот это, поскольку цепочка не казалась первостепенной.

Локальная функция делает процесс очень простым.

$("button").click(function() {
  const items = $('div[id^="item"]');
  const index = items.length;
  const targ = $(items).last().clone();
  // local function to update clone tags with desired attribute value
  const update = (tagName, attrName) => {
    $(targ).find(tagName).each((i, el) => {
      // note split result is OK when attr does not have the separator.
      const prefix = $(el).prop(attrName).split('_')[0];
      $(el).prop(attrName, `${prefix}_${index}`);
    })
    return update; // support chaining
  }
  // update cloned element attributes using chaining
  update('label', 'for')('input', 'id');

  $(targ).appendTo($(".list")).prop("id", `item_${index}`);
  // demonstrate the result with console
  console.log($(targ).html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click">CLICK TO CLONE</button>
<div class="list">
  <div class="item" id="item">
    <label for="box">checkbox
      <input id="box" type="checkbox">
    </label>
    <label for="toggle">
      <input id="toggle" type="input" value="search">
    </label>
  </div>
</div>

Удачи!