DataTable Edit Cell On Click inline in JavaScript

// https://jsfiddle.net/jdlubrano/r6wq8v7y/13/

//<table id="datatable" class="display">
//     <thead>
//         <tr>
//             <th>Root Cause</th>
//             <th>Description</th>
//             <th>&nbsp;</th>
//         </tr>
//     </thead>
//     <tfoot>
//         <tr>
//             <th>Root Cause</th>
//             <th>Description</th>
//         </tr>
//     </tfoot>
// </table>

<table id="datatable" class="display">
    <thead>
        <tr>
            <th>Root Cause</th>
            <th>Description</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Root Cause</th>
            <th>Description</th>
        </tr>
    </tfoot>
</table>

$(document).ready(function() {
    var tableData = [
        {
            "id": 1,
            "name": "RC_1",
            "description": "This is the first root cause"
        },
        {
            "id": 2,
            "name": "RC_2",
            "description": "This is the second root cause"
        }
    ];
    var dataTable = $('#datatable').DataTable({
        "data": tableData,
        "columns": [
            { "data": "name" },
            { "data": "description" },
            {
                "data": null,
                "defaultContent": '<button>Remove</button>'
            }
        ]
    });
    $('#datatable').on('click', 'tbody > tr', function() {
        if( !$(this).hasClass('selected') ) {
           $('#datatable > tbody > tr.selected').removeClass('selected')
           $(this).addClass('selected');
        }
    });
    $('#datatable').on('dblclick', 'tbody td', function() {
        var text = dataTable.cell($(this)).data();
        var inputElement = document.createElement('input');
        inputElement.type = "text";
        inputElement.value = text;
        inputElement.className = "editable";
        this.innerHTML = '';
        this.appendChild(inputElement);
        $(inputElement).focus();
    });
    $('#datatable').on('change', '.editable', function() {
        var inputVal = this.value;
        var cell = dataTable.cell($(this).parent('td'));
        var row = dataTable.row($(this).parents('tr'));
        var oldData = cell.data();
        cell.data(inputVal);
        console.log(JSON.stringify(row.data()));
        // Make an ajax call to update table.
        // If the ajax call fails, put the old data back
        // and show a warning.
        dataTable.draw();
    });
    $('#datatable').on('blur', '.editable', function() {
        $(this).parent('td').html(this.value);
        dataTable.draw();
    });
});
// --------------------------------------------------------------

    $('#ajaxSalarytable').on('click', 'tbody > tr', function() {
      if( !$(this).hasClass('selected') ) {
       $('#ajaxSalarytable > tbody > tr.selected').removeClass('selected')
       $(this).addClass('selected');
     }
   });

    $('#ajaxSalarytable').on('dblclick', 'tbody td', function()
    {
      var check_class = $(this).attr('class');
      if(check_class == 'hold_salary_amount' || check_class == 'hold_remark')
      {
        var text = oTable.cell($(this)).data();
        var inputElement = document.createElement('input');
        inputElement.type = "text";
        inputElement.value = text;
        inputElement.className = "editable";
        this.innerHTML = '';
        this.appendChild(inputElement);
        $(inputElement).focus();
      }
    });

    $('#ajaxSalarytable').on('change', '.editable', function()
    {
      var check_class = $(this).parent('td').attr('class');
      if(check_class == 'hold_salary_amount' || check_class == 'hold_remark')
      {
        var inputVal = this.value;
        var cell     = oTable.cell($(this).parent('td'));
        var row      = oTable.row($(this).parents('tr'));
        var oldData  = cell.data();
        var employee_id = row.data().id;
        // console.log('===  index.js [166] ===', inputVal);
        var formData = new FormData();
        formData.append('employee_id', employee_id);
        formData.append(check_class, inputVal);
        $.ajax({
          url: backend_url + '/salary/update',
          type: 'POST',
          data: formData,
          cache: false,
          contentType: false,
          processData: false,
          dataType: 'json',
          beforeSend: function() {
            // Add Loader
          },
          success: function (res) {
            //var res = JSON.parse(data);
            if(res.type == 'success'){
              //Message
              alert(res.message);
              // $('#FORM_NAME').trigger("reset");
            }else{
              //Message
              alert(res.message);
            }
          },
          error: function(xhr) {
            // if error occured
            // console.log(xhr);
          },
          complete: function() {
            // Remove Loader
          },
          statusCode: {
            404: function() {
              // alert("page not found");
            },
            403: function() {
              // alert("Forbidden");
            },
            500: function() {
              // alert("Internal Server Error");
            }
          }
        });
        // cell.data(inputVal);
        // console.log(JSON.stringify(row.data()));
        // Make an ajax call to update table.
        // If the ajax call fails, put the old data back
        // and show a warning.
        oTable.draw();
      }
    });

    $('#ajaxSalarytable').on('blur', '.editable', function() {
      $(this).parent('td').html(this.value);
      oTable.draw();
    });
// --------------------------------------------------------------