I'd like to create a table with an editable column (now on click, in the end on the button click). I have found a good tutorial for that: https://www.youtube.com/watch?v=pNxWUfw1J_w,

but the table's columns are defined in JS, not in HTML. When I try to implement it, the table disappears.

The code:

TABLE'S DEFINITION IN HTML

<div class="table-wrapper">
  <div class="progress-border" style="position: sticky; top: 6rem; width: 100%;" ></div>
    <table id="table-placement" class="table table-striped"
      <thead class="thead-darker-grey">
    <th scope="col" sort-by="type.name"><span>Type</span></th>
    <th scope="col"></th>
    <th scope="col" sort-by="description"><span>Description</span></th>
    <th scope="col" sort-by="company"><span>Company</span></th
    <th scope="col" sort-by="place"><span>Place</span></th
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>

(...)

TABLE COLUMN CREATION AND DATA POPULATION

function refresh_row(row, values) {
          var tds = $(row).children('td');
          var ii = 0;
        
          $(tds[ii]).html(values.type.name);
          ii++;
          $(tds[ii]).html(values.description).attr('id', 'description-${obj.id}').data('testid', '${obj.id}');
          ii++;
          $(tds[ii]).html(values.company);
          ii++;
          $(tds[ii]).html(values.place);
          ii++;

          $(`#description-${obj.id}`).on('click', edit_description)
        }

(...)

EDITING DESCRIPTION FUNCTION

function edit_description(){
  
  var testid = $(this).data('testid')
  var value = $(this).html()

  $(this).html(`<input class="description form-control" data-test="${test-id}" type ="text" value = "${value}">`)
            }

How can I fix this functionality?