Как клонировать input'ы внутри дива, рационально изменяя ID и name каждого?

Question

[Владик Лимонадик]

Ссылка на кодепен

Разметка

<div class="wrapper-1">
  <input id="name-1" class="name-input" type="text" name="name"/>
  <input id="surname-1" type="text" name="surnamename"/>
  <input id="telephone-1" type="text" name="telephone"/>
  <input id="email-1" type="text" name="email"/>
  <input id="comments-1" type="text" name="comments"/>
</div>

<button>Clone me</button>

JavaScript:

$('button').click(function() {
  var d = $('div');
  var counter = d.length;
  var newCounter = new Number(counter + 1);
  var cloned = $('.wrapper-' + counter).clone().attr('class', 'wrapper-' + newCounter).fadeIn('slow');

  //Finding items that need to have different ID
  cloned.find('.name-input').attr('id', '#name-' + newCounter);

  //Cloning
  $('.wrapper-' + counter).after(cloned);
});

Собственно, как видите, класс враппера и .name-input меняются в зависимости от количества враппером на странице.

Но если 25 инпутов, и каждому надо присвоить уникальный ID и name, придется 50 раз дублировать код, есть ли способ, который заставить браузер парсить каждый input и изменять его id и name на id-1 и name-1

Answer 1

[desuvin]

$('.name-input').each(function(a) {
$(this).attr('id', 'name-input-'+a);
});