title: Datatables JQuery Adding new row - not working
body: <p>HTML : </p>
  
  <pre><code>        &lt;div class="datatable-header"&gt;
               &lt;button type="button" name="add" id="add" class="float-right btn btn-info"&gt;Add&lt;/button&gt;
           &lt;/div&gt;
  
          &lt;div class="table-responsive"&gt;
              &lt;table class="table datatable-basic table-striped table-hover table-bordered"
                     data-data-url="&lt;?= $this-&gt;url('bla/blabla/ajax', ['action' =&gt; 'list']) ?&gt;
                     id="text-dataTable"
              &gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Text&lt;/th&gt;
                      &lt;th&gt;Actions&lt;/th&gt;
                   &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JQuery: </p>
  
  <pre><code> const textTable = $('#text-dataTable');
          const textDataTable = textTable.DataTable({
              "lengthMenu": [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
              "dom": '&lt;"top"fBr&gt;&lt;"datatable-scroll-wrap"t&gt;&lt;"bottom mt-2"ilp&gt;',
              "lengthChange": true,
              "pageLength": 25,
              "autoWidth": false,
              "searching": false,
              "order": [[0, 'asc']],
              "ajax": {
                  "url": textTable.data('data-url'),
                  "type": "POST"
              },
              "columnDefs": [
                  { targets: [1], className: "text-center"},
              ],
              "columns": [
                  { data: "text", "render": function (data, type, full, meta) {
                          return '&lt;textarea style="width: 100%"  contenteditable id="text" class="update" data-id="'+full.id+'" data-column="text"&gt;' + data + '&lt;/textarea&gt;';
                      }
                  },
                  { data: "textId", "render": function (data, type, full, meta) {
                          let $html =  '&lt;a class="btn bg-success m-1 update" data-id="'+data+'"&gt;&lt;i class="icon-floppy-disk"&gt;&lt;/i&gt; Update&lt;/a&gt;';
                           $html +=  '&lt;a class="btn bg-danger m-1 remove" data-id="'+data+'"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;';
                           $html +=  '&lt;a class="btn bg-grey m-1 reset" data-id="'+data+'"&gt;&lt;i class="icon-reset"&gt;&lt;/i&gt; Reset&lt;/a&gt;';
                           return $html;
                      }
                  },
              ],
              "rowCallback": function (row, data, index) {
                  if (data.hasOwnProperty('rowClass')) {
                      $(row).attr('class', data.rowClass);
                  }
  
                  $('td:last', row).attr('class', 'text-center');
                  }
          });
  
          $('#add').click(function(){
              const addedRow = textDataTable.row.add(
                  {
                      "text": "aa",
                      "textId": "bb",
                  }
             );
              textDataTable.draw( false );
              const addedRowNode = addedRow.node();
              $(addedRowNode).addClass('highlight');
          });
  
  </code></pre>
  
  <p>Result: 
  it's updating the text for the first column and the data-id of the second column, my goal is to add a new empty row, which means i want the first column to have 'aa' and the second column to have 'bb' instead of the buttons. I tried hundreds of things in vain. </p>
  
  <p>See Screenshot: </p>
  
  <p><a href="https://i.stack.imgur.com/Cg8YT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cg8YT.png" alt="enter image description here"></a></p>
  
  <p>Second Thing I tried: which is a problem because if the user adds multiple rows at the same time and click insert one by one, it will always insert the value of the first new row added, since it's getting the value by id. And all the new rows have the same ID. </p>
  
  <pre><code>
        $('#add').click(function(){
  
              let html = '&lt;tr&gt;';
              html += '&lt;td&gt;&lt;textarea contenteditable id="new-row-text"&gt;aa&lt;/textarea&gt;&lt;/td&gt;';
              html += '&lt;td&gt;&lt;a class="btn bg-grey m-1 insert"&gt;&lt;i class="icon-plus22"&gt;&lt;/i&gt; Insert&lt;/a&gt;&lt;/td&gt;';
              html += '&lt;/tr&gt;';
              $('#text-dataTable tbody').prepend(html);
          });
  
          textDataTable.on('click', 'a.insert', function(){
  
              swal.fire({
                  title: 'Are You Sure?',
                  showCancelButton: true,
                  confirmButtonClass: "btn-success",
                  reverseButtons: true,
                  showLoaderOnConfirm: true,
                  preConfirm: function (data) {
                      return new Promise(function (resolve, reject) {
                          $.post(
                              textDataTable.data('insert-url'),
                              {
                                  text: $('#new-row-text').val()
                              },
                              (function data($data) {
                                  resolve()
                              }),
                              'json'
  
                          ).fail((function(xhr, status, error) {
                              swal.fire('Error', xhr.responseJSON.error, 'error');
  
                          }));
                      })
                  }
  
              }).then(result =&gt; {
                  if (result.value) {
                      textDataTable.ajax.reload();
                  } else {
                  }
              }, (function () {
  
              }));
  
          });
  </code></pre>