JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="wrapper">
    <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
      <thead>
        <tr>
          <th>Name</th>
          <th>Level</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="table-data">
      </tbody>
      <tbody id="table-rows">
        <tr>
          <td><input type="text" id="name-text"></td>
          <td>
            <select name="levels-list" id="levels-list">
              <option value="A" id="option-1">A</option>
              <option value="B" id="option-2">B</option>
              <option value="C" id="option-3">C</option>
            </select>
          </td>
          <td><input type="button" class="add" value="Add Row" id="add-button"></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

JavaScript

var myArray = [{
  "name": "aaa",
  "level": "A"
}, {
  "name": "bbb",
  "level": "B"
}, {
  "name": "ccc",
  "level": "C"
}];

function createDataRow(el, ind) {
  var row = document.createElement('tr');
  row.id = 'row-' + ind;
  var cell1Content = `
  	<div class="name-content">${el.name}</div>
    <input class="name-edit" type="text" id="name-text-${ind}" value="${el.name}" style="display:none;">
  `;
  
  var cell2Content = `
  	<div class="level-content">${el.level}</div>
  	<select class="level-edit" id="levels-list-${ind}" style="display:none;">
      <option value="A">A</option>\
      <option value="B">B</option>\
      <option value="C">C</option>\
    </select>
  `;
  
  var cell3Content = `
    <input type="button" id='edit_button" + i + "' value="Edit" class="edit" onclick="editRow(this, ${ind})">
    <input type="button" id='save_button" + i + "' value="Save" class="save" onclick="saveRow(this, ${ind})">
    <input type="button" value="Delete" class="delete" onclick="deleteRow(this, ${ind})">
  `;
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = cell1Content;
  cell2.innerHTML = cell2Content;
  cell3.innerHTML = cell3Content;
  
  document.getElementById('table-data').appendChild(row);
}

function displayData() {
  myArray.forEach(function(el, ind) {
  	createDataRow(el,ind);
  });
}

function deleteRow(el, ind) {
	el.parentElement.parentElement.parentElement.removeChild(el.parentElement.parentElement); 
  myArray.splice(ind, 1);
}

function addRow(){
  event.preventDefault();
  var newEl = {
  	"name": document.getElementById("name-text").value,
    "level": document.getElementById("levels-list").value
  };
  myArray.push(newEl);
  createDataRow(newEl, myArray.length - 1);
  document.getElementById("name-text").value = '';
  document.getElementById("levels-list").value = 'A';
}//end addRow

function editRow(el, ind)
{
	var currentRow = el.parentElement.parentElement;
  
 ...