clone datepicker, less, Add more..

by Akram kamal

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

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

        }, 0);
    },

})

$(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()


        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()

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