JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="table table-hover table-bordered">
  <thead class="colorBlue">
    <tr>
      <td>S.No</td>
      <td>Applied On</td>
      <td>Leave Type</td>
      <td>Leave On</td>
      <td>Duration</td>
      <td>Status</td>
      <td>Approved On</td>
      <td>Approved By</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody id="levListTable"></tbody>
</table>

CSS

.tooltip-arrow,
.cancelComments + .tooltip > .tooltip-inner {background-color: #f00;}

JavaScript

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

var leaveList = [{
  "appliedOn": "12-02-2017",
  "levType": "causual",
  "leaveOn": "12-02-2017",
  "duration": "5 days",
  "status": "Approved",
  "approvedOn": "null",
  "leaveTypeId": "2",
  "approvedBy": "null",
  "Note":"I dont want leave now"
},  {
  "appliedOn": "12-02-2017",
  "levType": "privileged",
  "leaveOn": "14-03-2017",
  "duration": "8 days",
  "status": "pending",
  "approvedOn": "13-02-2017",
  "leaveTypeId": "3",
  "approvedBy": "HR",
   "Note":"I have cancelled it"
}];


function leaveTable() {
  for (var i = 0; i < leaveList.length; i++) {
    var editDis = '';
    var cancelDis = '';
    var thisStatus = leaveList[i].status;
    if (thisStatus == "Approved") {
      console.log('what>');
      editDis = ' disabled ';
    } else if (thisStatus == "Rejected" || thisStatus == "Cancelled") {
      editDis = ' disabled ';
      cancelDis = ' disabled ';
    }

    var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn editLev fa fa-calendar-plus-o editAction" onclick="editLevDetails(this)" ' + editDis + '></i><i class="btn dltLev fa fa-times cancelAction"  ' + cancelDis + ' onclick="cancelLeave(this)" data-dismiss="modal"  value="Cancelled" id="' + leaveList[i].LeaveTypeId + '"></i><i class="fa fa-comment-o cancelComments" data-toggle="tooltip" data-placement="bottom" title="' +leaveList[i].Note+'"></i></td><tr>';

    $('#levListTable').append(tab)
  }
}