JSFiddle - React, Tailwind, and code Playground

by shahzadwaris

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-10 col-md-8 mt-2  text-right'>
							<button class = 'btn btn-sm addBeneficiary ' >Add</button>
						</div>
				  </div>
				  <div id = 'beneficiaries'>
				  </div>

JavaScript 1.7

$(document).delegate(".delBeneficiary", "click", function (e) {
        e.preventDefault();
        var div = $(this).attr("id");
        var nmbr = div.replace(/\D/g, "");
        $("." + div).remove();
        bene--;

        //alert(nmbr);
    });
    var bene = 2;
    $(".addBeneficiary").click(function (e) {
        e.preventDefault();
        addBeneficiary(bene);
        bene++;
    });
    $(document).delegate(".addBeneficiaryD", "click", function (e) {
        e.preventDefault();
        addBeneficiary(bene);
        bene++;
    });
       function addBeneficiary(bene) {
        $("#beneficiaries").append(
            "<div class = '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' 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'>" +
            "</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'>" +
            "</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'>" +
            "</div>" +
            "<div class = 'col-xs-12 col-sm-12 col-md-11 mt-2 ...