JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn btn-primary" id="AddRow">Add Step</button>test
<table id="mytable">
  <thead>
    <tr>
      <th>somecol1</th>
      <th>somecol2</th>
      <th>somecol3</th>
    </tr>
  </thead>

  <tbody>
      <tr>
          <td>row 1</td>
          <td><input type="button" value="move up" class="move up" /></td>
          <td><input type="button" value="move down" class="move down" /></td>
      </tr>
      <tr>
          <td>row 2</td>
          <td><input type="button" value="move up" class="move up" /></td>
          <td><input type="button" value="move down" class="move down" /></td>
      </tr>
      <tr>
          <td>row 3</td>
          <td><input type="button" value="move up" class="move up" /></td>
          <td><input type="button" value="move down" class="move down" /></td>
      </tr>
    </tbody>
</table>

JavaScript

$('#mytable input.move').click(function() {
    var row = $(this).closest('tr');
    if ($(this).hasClass('up'))
        row.prev().before(row);
    else
        row.next().after(row);
});


    
    $('.sorted_table').sortable({
      containerSelector: 'table',
      itemPath: '> tbody',
      itemSelector: 'tr',
      placeholder: '<tr class="placeholder"/>'
    });


  function recountCellOrderRows(){
    //
    var table = document.getElementById("mytable").getElementsByTagName('tbody')[0];
    for (var i = 0, cell; cell = table.cells[i]; i++) {
    }
  } //end recountCellOrderRows()

var fixHelper = function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; };

$("#Save").click(function() {
    // Disable Sortable. Freeze the table
    $("table tbody").sortable({ 
        helper: fixHelper
    }).disableSelection();


    $("table tbody").sortable({ 
        update: function(event, ui) {  
            $('table tr').each(function() {
                $(this).children('td:first-child').html($(this).index())
            });
        },
        helper: fixHelper,
        onDrop: function($item, container, _super) {
        console.log($item.html());
        _super($item)
    }
    }).disableSelection();


}); //end Save Button Code

  function addRowToTable(){
    var table = document.getElementById("mytable").getElementsByTagName('tbody')[0];
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    row.setAttribute("class", "ui-sortable-handle");
    cell1.innerHTML = "0";
    cell2.innerHTML = "Instructions Here";
    cell3.innerHTML = "Link to External Site";
  } //end addRowToTable()

  $("#AddRow").click(function() {
      addRowToTable();
  });

$('#Edit').click(function () {
    if ($('td').attr('contenteditable') === 'false') {
        $('td').attr('contenteditable', true);
    } else {
        $('td').attr('contenteditable',...