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 () {
    EditableTable.init();
});

var EditableTable = function () {

    return {

        //main function to initiate the module
        init: function () {
            function restoreRow(oTable, nRow) {
                var aData = oTable.fnGetData(nRow);
                var jqTds = $('>td', nRow);

                for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                    oTable.fnUpdate(aData[i], nRow, i, false);
                }

                oTable.fnDraw();
            }

            function editRow(oTable, nRow) {
                var aData = oTable.fnGetData(nRow);
                var jqTds = $('>td', nRow);
                jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
                jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
                jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
                jqTds[3].innerHTML = '<input type="text" class="form-control small" value="' + aData[3] + '">';
                jqTds[4].innerHTML = '<a class="edit" href="">Save</a>';
                jqTds[5].innerHTML = '<a class="cancel" href="">Cancel</a>';
            }

            function saveRow(oTable, nRow) {
                var jqInputs = $('input', nRow);
                oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
                oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
                oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
                oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
                oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
                oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 5, false);
                oTable.fnDraw();
            }

            function cancelEditRow(oTable, nRow) {
                var jqInputs = $('input', nRow);
               ...