JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<div class="duplicatorForm">
  <div class="r">
    <input type="text" name="" id="name" value="Ajith">
    <a href="javascript:;" class="btn addNew">Add</a><a href="javascript:;" class="btn removeRow">Remove</a>
  </div>
</div>

SCSS

.duplicatorForm {
  padding: 15px;
  position: relative;
  counter-reset: steps;
  & > .r {
    padding: 15px;
    position: relative;
    border-bottom:  #32A7DD 1px solid;
    &:before {
      font-size: 18px;
      position: relative;
      pointer-events: none;
      display: inline-block;
      counter-increment: steps;
      content: counter(steps, decimal);
    }
  }
}

.btn{
  background: #2E7D32;
  color: #fff;
  margin-right: 10px;
  display: inline-block;
  padding: 5px 15px;
  text-decoration: none;
  border-radius: 2px;
}

JavaScript

$('.btn.addNew').on('click', function(){
	var row = $(this).closest('.r').clone(true),
  	i = $(this).closest('.r').index() + 1,
    l = $(this).closest('.duplicatorForm').find('.r').length;
  $(this).remove();
  $('.duplicatorForm').append(row);
});

$('.btn.removeRow').on('click', function() {
	var i = $(this).closest('.r').index() + 1,
    l = $(this).closest('.duplicatorForm').find('.r').length;
  if ( l === 1 ) { alert("Can't Able to Remove!!"); return; }
	if ( i === l ) {
  	var btn = $(this).closest('.r').find('.addNew').clone(true);
    $( btn ).insertBefore( $(this).closest('.r').prev('.r').find('.btn.removeRow') );
  }
  $(this).closest('.r').remove();
});