Add and Remove Row - Method 2

by Atif_Hanif

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="multi-field-wrapper">
    <div class="multi-fields">
      <div class="multi-field">
        <div class="row mt-3">
          <div class="col-md-3">
            <label for="name" class="form-label">Name:</label>
            <input type="text" class="form-control" id="pwd" placeholder="Enter name" name="name">
          </div>
          <div class="col-md-3">
            <label for="email" class="form-label">Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
          </div>
          <div class="col-md-3">
            <label for="pwd" class="form-label">Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
          </div>
          <div class="col-md-3">
            <label for="phone" class="form-label">Phone Number:</label>
            <input type="tel" class="form-control" id="pwd" placeholder="Enter phone number" name="phone">
          </div>
        </div>
        <button type="button" class="btn btn-danger btn-md remove-field mt-3">Remove</button>
      </div>
    </div>
    <button type="button" class="btn btn-primary btn-md add-field mt-3">Add Row</button>
  </div>
</div>

JavaScript

$('.multi-field-wrapper').each(function() {
  var $wrapper = $('.multi-fields', this);

  function toggleRemoveButtons() {
    if ($('.multi-field', $wrapper).length > 1) {
      $('.multi-field .remove-field', $wrapper).show();
    } else {
      $('.multi-field .remove-field', $wrapper).hide();
    }
  }

  $(".add-field", $(this)).click(function(e) {
    var $clone = $('.multi-field:first-child', $wrapper).clone(true);
    $clone.find('input').val(''); // Clear input values
    $clone.appendTo($wrapper);
    toggleRemoveButtons();
  });

  $wrapper.on('click', '.remove-field', function() {
    if ($('.multi-field', $wrapper).length > 1) {
      $(this).closest('.multi-field').remove();
      toggleRemoveButtons();
    }
  });

  // Initial check on page load
  toggleRemoveButtons();
});