How to make DataTable, but the row is only appended

I have a table that add rows manually, but I want to make it into a DataTable to make it friendly user. But I don't know how to do it.

I tried to search it online and I see this, it is similar but it is not working or I'm doing something wrong... See here

Also this is my code :

const tbody = document.getElementById("choicesListTbodyADD");
const btnAdd = document.querySelector("button");
const inputChoices = document.querySelector("input");
var count = 1;
btnAdd.addEventListener("click", function () {
  $(tbody).append(`<tr><td>${count}</td><td>${inputChoices.value.trim()}</td><td>DELETE</td></tr>`)
  inputChoices.value = '';
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br>
<input type="text" id="choices"/>
<button id="appendChoices">Add Choices</button>
<br><br>

<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
  <tr>
    <th>No.</th>
    <th>Choices</th>
    <th>Action</th>
  </tr>
  <tbody id="choicesListTbodyADD"></tbody>
</table>

Solution

Here is an approach, based on your non-DataTables code.

I have included the Bootstrap libraries I think you need - but you can adjust those if needed.

$(document).ready(function() {

  var table = $('#ADDchoicesARTableListSequence').DataTable();

  const tbody = document.getElementById("choicesListTbodyADD");
  const btnAdd = document.querySelector("button");
  const inputChoices = document.querySelector("input");
  var count = 1;
  btnAdd.addEventListener("click", function() {
    table.row.add($(`<tr><td>${count}</td><td>${inputChoices.value.trim()}</td><td>DELETE</td></tr>`)).draw();
    count += 1;
    inputChoices.value = '';
  })

});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>

</head>

<body>

  <div style="margin: 20px;">
    <input type="text" id="choices" />
    <button id="appendChoices">Add Choices</button>
    <br><br>

    <table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
      <thead>
        <tr>
          <th>No.</th>
          <th>Choices</th>
          <th>Action</th>
        </tr>
      </thead>
    </table>

  </div>



</body>

</html>

The main points to note:

Your HTML table does not need a <body> in this case, as DataTables will provide it for you.
Don't forget to use draw() after adding each row - to re-draw the table, so the new data is displayed.
In this case, I create a new DOM node from your data using $(<tr>...</tr>). But you can see from the documentation that there are other ways you can create new rows:

using an array
using an object
using a node (which is what we do here)

I chose to use a node because that is the closest to what your code already does.