JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<table id="notes-table">
  <thead>
    <tr>
      <th id="notes-name-column">Name</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-filter="1">First Name</td>
      <td>First Note</td>
    </tr>
  </tbody>
</table>

<script id="note-row-template" type="text/x-handlebars-template">
	<tr>
  	<td data-filter="2">{{name}}</td>
    <td>{{comment}}</td>
  </tr>
</script>

JavaScript

let noteTable = $('#notes-table').DataTable({});

//Filter name column
//noteTable.column( "#notes-name-column" ).search("1", true, false).draw();

noteTable.rows().remove().draw();
//Add new row
let values = {
	name: "New Name",
  comment: "New Comment"
}

let source = document.getElementById("note-row-template").innerHTML;
let template = Handlebars.compile(source);
let html = template(values);

noteTable.row.add($(html)).draw().sort();

console.log(noteTable.row(1).data());