Coping and changing the block

[Anderson]

 function addNewGroup(button) {
   var html = $(button).parent().clone();
   console.log(html);
   $(button).parent().after(html);
   $(button).remove();
 }

<div>
  <label>TEST GROUP</label>
  <div class="test_field">
    <label for="i-620">TEST field</label>
    <input id="i-620" type="text" placeholder="" name="test_field">
  </div>
  <div class="test_checkbox">
    <label for="i-621">dsadasdas</label>
    <input id="i-621" type="checkbox" name="adsasdsa" value="1">
  </div>
  <button type="button" onclick="addNewGroup($(this))">Вставить группу</button>
</div>

There's the next code, it's just, there's a divine, there's elements in it, and the button's got to copy the diva and put it in the trail. It's simple, but there's still a need to change the name parameters at the Input, I mean, if it was first. name="test_field" next dime. name="test_field1" and so on, and so on, all the inputs. How do you do that?

[Jolied]

div = document.querySelector('.field');
var count = 0;
document.querySelector('button').onclick = function() {

count++;

div.innerHTML += div.firstElementChild.outerHTML;

div.lastElementChild.placeholder = 'field' + count;

}

<div class="field">

<input type="text" placeholder="field" name="field">

</div>

<button>add field</button>