JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class='bNmbr'>1</span></b></h6>
<div class="form-group row">
    <label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Name</span><span class='text-danger'> *</span></label>
    <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
    </div>
    <label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>NRIC / Passport No.</span><span class='text-danger'> *</span></label>
    <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
    </div>
    <label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Relationship</span></label>
    <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
    </div>
    <div class='col-xs-12 col-sm-12 col-md-11 mt-2  text-right'>
        <button class='btn btn-sm addBeneficiary '>Add</button>
    </div>
</div>
<div id='beneficiaries'>
</div>

JavaScript 1.7

var bene = 1;

function correctNumbers() {
    $('.bNmbr').each(function(i) {
        $(this).text(i + 1);
    });
};

$('body').on('click', '.addBeneficiary', function(e) {
    e.preventDefault();
    bene++;
    addBeneficiary(bene);
});

$('body').on('click', '.delBeneficiary', function(e) {
    e.preventDefault();
    $(this).closest('.bene').remove();
    correctNumbers();
});

function addBeneficiary(bene) {
    $("#beneficiaries").append('\
		<div class="bene" id="bene' + bene + '">\
			<h6 class="mt-3 mb-3"><b>Beneficiary <span class="bNmbr">' + bene + '</span></b></h6>\
			<div class="form-group row">\
				<label for="ename' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
					<span class="pt-5">Name</span>\
					<span class="text-danger"> *</span>\
				</label>\
				<div class="col-sm-7">\
					<input type="text" class="form-control p-1 mt-1" id="ename' + bene + '" name="ebname[]" placeholder="Name">\
				</div>\
				<label for="enric' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
					<span class="pt-5">NRIC / Passport No.</span>\
					<span class="text-danger"> *</span>\
				</label>\
				<div class="col-sm-7">\
					<input type="text" class="form-control p-1 mt-1" id="enric' + bene + '" name="ebnric[]" placeholder="NRIC / Passport No">\
				</div>\
				<label for="relationship' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
					<span class="pt-5">Relationship</span>\
				</label>\
				<div class="col-sm-7">\
					<input type="text" class="form-control p-1 mt-1" id="relationship' + bene + '" name="ebrelationship[]" placeholder="Relationship">\
				</div>\
				<div class="col-xs-12 col-sm-12 col-md-11 mt-2  text-right">\
					<button class="btn btn-sm addBeneficiary" id="add' + bene + '">Add</button>\
					<button class="btn btn-sm delBeneficiary ml-2" id="delete' + bene + '">Delete</button>\
				</div>\
			</div>\
		</div>\
	');
};