JSFiddle - React, Tailwind, and code Playground

HTML

<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="false">Row 0 Column 0</td>
        <td><button class="editbtn">Edit</button></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><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 1 Column 1</td>
        <td contenteditable="false">Row 1 Column 2</td>
    </tr>
</table>

JavaScript

$('.editbtn').click(function() {
	var $this = $(this);
	var tds = $this.closest('tr').find('td').filter(function() {
		return $(this).find('.editbtn').length === 0;
	});
	if ($this.html() === 'Edit') {
		$this.html('Save');
		tds.prop('contenteditable', true);
	} else {
		$this.html('Edit');
		tds.prop('contenteditable', false);
	}
});