Jquery DatePicker doesn`t work when clicked add new line link

Question

i am trying to add a new line when i click the link. but jquery doesnt run. on jsfiddle it runs but doesn`t add a new line. here is jsfiddle. add_field() adds new empty inputs which is invisible in my form.

    <script type="text/javascript">
    function add_field(){
        var cont = document.getElementById('addhere'); // refer to the div
        var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div
            // create a div element
            var div1 = document.createElement('div');
            // Get template data
            div1.innerHTML = document.getElementById('fieldtpl').innerHTML;
            // append to div, so that template data becomes part of document
            document.getElementById('addhere').appendChild(div1);   
    }

    $( ".datepick").each(function() {
      $( this ).datepicker({
        changeMonth: true,
        changeYear: true
      });
    });
    </script>

<form name="ExtendForm" id="ExtendForm" method="get" action="">
    <a href="javascript:void(0);" onClick="add_field();">Add new line</a>
    <BR>
    <div id="container1" style="position:fixed;">
        <div id="stid" style="float:left; width:200px;">
            Student ID
        </div>
        <div id="sdate" style="float:left; width:200px;">
            Start
        </div>
        <div id="fdate" style="float:left; width:200px;">
            Finish
        </div>
        <div id="addhere" style="float:relative; width:600px;">
            <div id="stid" style="float:left; width:200px;">
                <input type="text" name="studentid" id="studentid">
            </div>
            <div id="sdate" style="float:left; width:200px;">
                <input name="start" class="datepick">
            </div>
            <div id="fdate" style="float:left; width:200px;">
                <input name="finish"  class="datepick">
            </div>
        </div>

        <div id="fieldtpl" style="display:none;">
            <div id="stid" style="float:left; width:200px;">
                <input type="text" name="studentid" id="studentid">
            </div>
            <div id="sdate" style="float:left; width:200px;">
                <input name="start" class="datepick">
            </div>
            <div id="fdate" style="float:left; width:200px;">
                <input name="finish"  class="datepick">
            </div>
        </div>

        <div id="sbmt" style="width:600px; text-align:center">
            <input type="submit" name="saveForm" id="saveForm" value="Submit">
        </div>
    </div>
</form>

Answer 1

Use this...

$(document).ready(function(){
    setDatePicker();
});

$('#addLine').on('click', function(){
        var cont = document.getElementById('addhere'); // refer to the div
        var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div
        // create a div element
        var div1 = document.createElement('div');
        // Get template data
        div1.innerHTML = document.getElementById('fieldtpl').innerHTML;
        $('#addhere').append(div1.innerHTML);
        setDatePicker();
    });

function setDatePicker() {
    $( "#addhere .datepick").each(function() {
        $( this ).datepicker({
            changeMonth: true,
            changeYear: true
         });
    });
}

See this DEMO