JSFiddle - React, Tailwind, and code Playground

HTML

<table id="class1" class="class">
  <tr>
    <td data-id="A">a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>

    <td data-id="B">B</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td data-id="C">C</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td data-id="D">D</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

JavaScript

var lastLetter = $('table.class tr:last td:first').data("id");



function nextChar(c) {
  return String.fromCharCode(c.charCodeAt(0) + 1);
}

var newLetter = nextChar(lastLetter);
alert(newLetter);

var row = `
                            <tr>
                                <td  data-id="+newLetter+">"+newLetter+"</td>
                                <td> <input class="" type="checkbox" name="comp"> </td>
                                <td> <input class="" type="checkbox" name="flex"> </td>
                                <td> <input class="" type="checkbox" name="abs"> </td>
                            </tr>
                            `;

document.getElementById("class1").insertRow(-1).innerHTML = row;