JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <table id="tableone" border="1">
    <thead>
      <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
        <th class="col3">Header 4</th>
      </tr>
    </thead>
    <tr class="del">
      <td contenteditable="true">Row 0 Column 0</td>
      <td>
        <input class="editbtn" type="button" value="Edit">

      </td>
      <td contenteditable="false">Row 0 Column 1</td>
      <td contenteditable="false">Row 0 Column 2</td>
    </tr>
    <tr class="del">
      <td contenteditable="false">Row 1 Column 0</td>
      <td>
        <input class="editbtn" type="button" value="Edit">

      </td>
      <td contenteditable="false">Row 1 Column 1</td>
      <td contenteditable="false">Row 1 Column 2</td>
    </tr>
  </table>
  <input id="btnHide" type="button" value="Hide Column 2" />
</body>

JavaScript

$(document).ready(function() {
    $('#btnHide').click(function() {
      //$('td:nth-child(2)').hide();
      // if your table has header(th), use this
      $('td:nth-child(3),th:nth-child(3)').hide();
    });
  });


  $(document).ready(function() {
    $('.editbtn').click(function() {
      var currentTD = $(this).parents('tr').find('td');
      console.log($(this).val())
      if ($(this).val() == 'Edit') {
        currentTD = $(this).parents('tr').find('td');
        $.each(currentTD, function() {
          $(this).prop('contenteditable', true)
        });
      } else {
        $.each(currentTD, function() {
          $(this).prop('contenteditable', false)
        });
      }

      $(this).val($(this).val() == 'Edit' ? 'Save' : 'Edit')

    });

  });