JSFiddle - React, Tailwind, and code Playground

by keygrip

HTML

<div class="repeater">
  <div class="item">
    <label>Name</label>
			<input type="text" name="name" class="form-control" value="">
      <button type="button" class="btn btn-danger remove-row">X</button>
	    <hr />
  </div>
  
  <button type="button" class="btn btn-primary add-row">Add Row</button>
</div>

JavaScript

jQuery(document).ready(function($) {

//Show/Hide Add Button
	$('.add-row').click(function(){
		var sum = $('.item').length;
		if(sum >= 5){
			$(this).hide();
		}
	});

	$('.remove-row').click(function(){
		var sum = $('.item').length - 1;
		if(sum <= 4){
			$('.add-row').show();
		}
	});

//Add/Remove divs
  var verifyItemsRepeater = function() {
    var removeRow = $( '.repeater .remove-row' );
    if ( $( '.repeater > .item' ).length === 1 ) {
      removeRow.hide();
    } else {
      removeRow.show();
    }
  };

  verifyItemsRepeater();

  $( '.repeater > .add-row' ).click( function() {
    var clone = $( '.repeater > .item:last' ).clone();
    clone.find( 'input' ).val( '' );
    clone.find( 'select' ).val( '-- Select --' );
    $( clone ).insertBefore( $( this ) );
    var newIndex = $( '.repeater > .item' ).length - 1;

    $( '.repeater > .item:last [name]' ).attr( 'name', function( index, name ) {
      return name.replace( /\d+/g, newIndex );
    } );

    verifyItemsRepeater();
    return false;
  } );

  $( document ).on( 'click', '.repeater .remove-row', function() {
    var item = $( '.repeater > .item' );
    if ( item.length === 1 ) {
      item.find( 'input' ).val( '' );
    } else {
      $( this ).closest( '.item' ).remove();
    }
    verifyItemsRepeater();
    return false;
  } );
});