JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
To Reproduce the issue
<div style="background-color:#F4F4F4;">Clicking <b>Edit</b> show row data but after loading the table (click reload buttton) clicking <b>Edit</b> throws error</div>
<P>
    <br>
    <table id="sample_editable_1">
        <thead>
            <tr>
                <th>Username</th>
                <th>Full Name</th>
                <th>Points</th>
                <th>Notes</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>alex</td>
                <td>Alex Nilson</td>
                <td>1234</td>
                <td>power user</td>
                <td> <a class="edit" href="javascript:;">
										 Edit
									</a>

                </td>
            </tr>
            <tr>
                <td>lisa</td>
                <td>Lisa Wong</td>
                <td>434</td>
                <td>new user</td>
                <td> <a class="edit" href="javascript:;">
										 Edit
									</a>

                </td>
            </tr>
            <tr>
                <td>nick12</td>
                <td>Nick Roberts</td>
                <td>232</td>
                <td>power user</td>
                <td> <a class="edit" href="javascript:;">
										 Edit
									</a>

                </td>
            </tr>
        </tbody>
    </table>
    <button id="reload">Reload</button>

JavaScript

jQuery(document).ready(function () {
    var oTable = null;
    PageLoad.init();
    TableEditable.init();

});

var PageLoad = function () {

    return {

        //main function to initiate itemReceipt list table
        init: function () {

            $('body').on('click', '#reload', function () {
                
                if (oTable != null) {
                    oTable.fnDestroy();
                }
                
                //this is where ajax will be added
                ajaxHtml = '<tr bgcolor="#CCFFCC"><td>New</td><td>New</td><td>New</td><td>New</td><td><a class="edit" href="javascript:;">Edit</a></td></tr>'
               
                ajaxHtml = $.parseHTML(ajaxHtml)
               
                $('#sample_editable_1 >tbody').append(ajaxHtml);
                oTable = $('#sample_editable_1').dataTable()
                
            });
        }
    };

}();

var TableEditable = function () {

    return {

        //main function to initiate the module
        init: function () {

            oTable = $('#sample_editable_1').dataTable();

            $('body').on('click', '#sample_editable_1 a.edit', function (e) {
                e.preventDefault();
                /* Get the row as a parent of the link that was clicked on */
                var nRow = $(this).parents('tr')[0];

                var aData = oTable.fnGetData(nRow);

                alert('Value: ' + aData[0] + ', ' + aData[1] + ', ' + aData[2] + ', ' + aData[3])
            });
        }

    };

}();