JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="newlink">
    <div>
        <table style="border:1px solid black;">
            <tr>
                <th>Date:</td>
                    <td>
                        <input type="text" name="linkurl[]" id="Editbox18" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off">
                    </td>
            </tr>
            <tr>
                <th>Remark:</td>
            </tr>
            <tr>
                <td>
                    <textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off"></textarea>
                </td>
            </tr>
        </table>
        <br>
    </div>
</div>
<br>
<p id="addnew">
    <input id="clickBTN" type="button" name="linkdesc[]" value="Add More" style="width:80px;height:24px;z-index:136; color:black;">
</p>
<!-- Template -->
<div id="newlinktpl" style="display:none"><font size="1.5">
  <hr style="width:75%; margin-left:-5px;"/><br/>
<div>
  <table style="border:1px solid black;">
    <th>Date:</td>
        <td> <input type="text"  name="linkurl[]" id="Editbox" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off" >
        </td></tr>


        <tr>
        <th>Remark:</td></tr><tr>
        <td><textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off" ></textarea>
        </td></tr>

    </td>
    </tr>
    </table>                        
  </div></font>

</div>

JavaScript

$(document).ready(function () {
        $(".datepicker").datepicker({
            inline: true,
            dateFormat: "yy-mm-dd"
        });
        $("#clickBTN").click(function () {
            new_link()
        });
    });

    var ct = 1;

    function new_link() {
        ct++;
        var div1 = $('<div></div>');
        $(div1).attr('id', ct);
        // link to delete extended form elements
        var delLink = $('<input type="button" value="Del" style="position:relative; top:-20px; left:600px; color:black;      width:50px;height:20px;z-index:136;">');

        //set click to remove the element
        $(delLink).click(function () {
            $(div1).remove();
        });

        $(div1).append($('#newlinktpl').html());
        $(div1).append(delLink);
        // remove class hasDatePicker
        $(div1).find('.datepicker').removeClass("hasDatepicker");
        //set the new input element how datepicker
        $(div1).find('.datepicker').attr("ID","newInput"+ct);
        $(div1).find('.datepicker').datepicker({
            inline: true,
            dateFormat: "yy-mm-dd"
        });

        $('#newlink').append(div1);
    }
    // function to delete the newly added set of elements
    function delIt(eleId) {
        d = document;
        var ele = d.getElementById(eleId);
        var parentEle = d.getElementById('newlink');
        parentEle.removeChild(ele);
    }