JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<form id="register-pet-form" data-quantity="1">
    
    <fieldset id="practiceField" class="row">
                
        <div class="col-md-6 push-md-6">
                
            <h3>Practice</h3>
                        
            <select name="practice">
                <option value="">Value 1</option>
                <option value="">Value 2</option>                    
            </select>
                        
        </div>
                
    </fieldset>
    <!--/#practiceField-->
                
    <fieldset id="ownerDetails" class="row">
                
        <div class="col-md-6">
                    
            <h3>Your details</h3>
            <select name="title">
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Miss">Miss</option>
                <option value="Ms">Ms</option>
                <option value="Dr">Dr</option>
                <option value="Prof">Prof</option>
            </select>
                        
            <input name="fname" type="text" placeholder="First Name">
                        
            <input name="lname" type="text" placeholder="Last Name">
                        
            <input name="number" type="text" placeholder="Contact Number">
                        
            <input name="email" type="text" placeholder="Email Address">
                     
        </div>
                    
        <div class="col-md-6">
                    
            <h3>Your Address</h3>
                        
            <input name="address1" type="text" placeholder="Address 1">
            
            <input name="address2" type="text" placeholder="Address 2">
                        
            <input name="address3" type="text" placeholder="Address 3">
            
            <input name="postcode" type="text" placeholder="Postcode">
                    
        </div>
                
   ...

JavaScript

$(document).ready(function(e) {
    init();
});

function init() {
	registerPet();
}

function registerPet() {
	
	function addPetRegistrationForm() {
		var container = $('#register-pet-form'),
			lastForm = $('#register-pet-form fieldset:last-of-type'),
			currentForm = $('#pet-1'),
			newForm = currentForm.clone(),
			currentVal = parseInt(container.attr('data-quantity'), 10),
			newVal = currentVal + 1;
		
		$('h3', newForm).after('<a data-id="' + newVal + '" class="js-remove-pet remove-pet" href="#">Remove this pet</a>');
		
		$('input, select', newForm).each(function () {
		
			var newId = this.id.substring(0, this.id.length - 1) + newVal;
		
			$(this).prev().attr('for', newId);
		
			this.name = this.id = newId;
		});
		
		lastForm.after(newForm.attr('id', 'pet-' + newVal));
		container.attr('data-quantity', newVal);
	}
	
	function removePetRegistrationForm(target) {
		$('#pet-' + target).remove();
	}
	
	function handleRegisterPet() {
		
		if($('#pet-1').length) {
			
			$('#pet-1').addClass('ispet');
			
			$('#pet-1 *[name]').each(function(){
				
				$(this).attr('name',$(this).attr('name') + '[]');
			});

			var newBlock = $('#pet-1').html();
			
			$('#pet-1').after('<a href="" class="form-button-2" id="js-add-pet">Add another pet</a>');

			$('.add-pet').on('click',function() {
				
				var count = $('.ispet').length + 1;
				
				$('.ispet').last().after('<fieldset id="pet-'+ count +'" class="ispet">' + newBlock + '</fieldset>');
				
				return false;
			
			});
		}
	}
		
	$('.add-pet').on('click', function () {
		addPetRegistrationForm();
		return false;
	});
	
	$('#register-pet-form').on('click', '.js-remove-pet', function () {
		removePetRegistrationForm($(this).attr('data-id'));
		return false;
	});
}