JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<form id="append">

   <fieldset class="group">
     <legend>Группа</legend>

     <p>
       <label for="first-input">Инпут Раз:</label>
       <input name="first-input[]" id="first-input" value="" type="text">
     </p>

     <p>
       <label for="two-input">Инпут Два:</label>
       <input name="two-input[]" id="two-input" value="" type="text">
     </p>

     <p><a href="javascript:void(0);" class="remove">Удалить группу</a></p>

   </fieldset>

 </form>

 <p><a href="javascript:void(0);" class="add">Добавить группу</a></p>

JavaScript

var $cloner = $('.group:first').clone(),
  $flag = 1;

$(document).on('click', '.add', function(e) {

  e.preventDefault();

  $flag++;

  var $section = $cloner.clone().find(':input').each(function() {
    var $id = this.id +  '-' +$flag;
    $(this).prev().attr('for', $id);
    this.id = $id;
  }).end().appendTo('#append');
  return false;
});

$(document).on('click', '.remove', function(e) {
 e.preventDefault();
  $(this).parents('.group').remove();
  return false;
});