Render json in table using jQuery

HTML

<table id="personDataTable">
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    
</table>

CSS

table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

JavaScript

// ignore this first line (its fidle mock) and it will return what ever you pass as json:... parameter... consider to change it to your ajax call
$.ajax({
    url: '/echo/json/',
    type: "post",
    dataType: "json",
    data: {
        json: JSON.stringify([
  {
    "Ms_Id": "ssen1000",
    "Examiner": "2278 ssen",
    "Type_of_Plan": "SACM",
    "Age": 115,
    "Amount": 2380
  },
  {
    "Ms_Id": "ssen1000",
    "Examiner": "2278 ssen",
    "Type_of_Plan": "SACM",
    "Age": 115,
    "Amount": 2380
  }]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        // since we are using jQuery, you don't need to parse response
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.Ms_Id + "</td>"));
    row.append($("<td>" + rowData.Examiner + "</td>"));
    row.append($("<td>" + rowData.Type_of_Plan + "</td>"));
}