JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div class="container-fluid cloned-row1">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
            <label>School Name</label>
            <br/>
            <select class="slt_Field txt_schName" name="txt_schName[]">
                <option value="">Please Select</option>
                <option value="Emirates College of Technology- UAE">COL000001</option>
                <option value="Al Khawarizmi International College- UAE">COL000002</option>
                <option value="Syscoms College">COL000003</option>
                <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
                <option value="Advanced Placement">COL000005</option>
                <option value="Al Buraimi College (Uni Clge)">COL000006</option>
                <option value="Al-Ain Community College">COL000007</option>
                <option value="AMA Computer College">COL000008</option>
                <option value="Arab Academy for Bankg and Fin">COL000009</option>
                <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
                <option value="Arapahoe Community College">COL000011</option>
            </select>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
            <br>
            <input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
            <label><span class="text-error">*</span>High School Avg / CGPA</label>
            <br/>
            <input type="text"...

JavaScript

$(document).ready(function () {
    var aClone = $(".cloned-row1:last").clone()
    var i = 1;
    $(document).on("click", ".edu_add_button", function () {
        var i = $('.cloned-row1').length;
        var newRow = aClone.clone().insertAfter(".cloned-row1:last").attr({
            'id': function (_, id) {
                return id + i
            },
                'name': function (_, name) {
                return name + i
            }
        }).end().find('[id]').val('').attr({
            'id': function (_, id) {
                return id + i
            }
        }).end();
        console.log("new", newRow)
        $(".txt_Degdat", newRow).datepicker({
            dateFormat: "m-dd-yy",
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            beforeShow: function () {
                var me = this
                setTimeout(function () {
                    me.css('z-index', 99999999999999);

                }, 0);
            },

        })


        if (i < $('.cloned-row1').length) {
            $(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
        }
        i++;
        return false;
    });
    $(document).on('change', '.txt_schName', function () {
        var cur = $('.txt_schName').index($(this));
        $('.school_Name').eq(cur).val($(this).val())
    });


    $(".txt_Degdat").datepicker({
        dateFormat: "m-dd-yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        beforeShow: function () {
            var me = this
            setTimeout(function () {
                me.css('z-index', 99999999999999);

            }, 0);

        },

    })

    $(document).on('click', ".btn_less1", function () {
        var len = $('.cloned-row1').length;
        if (len > 1) {
            $(this).closest(".btn_less1").parent().parent().parent().remove();
        }
    });
});