JSFiddle - React, Tailwind, and code Playground

HTML

<table class="widefat fixed striped tags">
	<tbody id="singular-atts-list">
		<tr class="column-row">
			<td class="column-drag"><i class="dashicons dashicons-editor-justify"></i></td>
			<td class="column-name">
				<div class="row-name">Ширина</div>
				<div class="row-actions">
					<span class="edit-attr">Редактировать | </span>
					<span class="delete-attr">Удалить</span>
				</div>
			</td>
			<td class="column-label">shirina</td>
			<td class="column-value">10</td>
			<td class="column-measure">см</td>
			<td class="column-variable" style="padding: 9px 2px;">
				<input value="" id="attribute_variable-erpfow" name="attribute_variable" class="attribute_variable wpsl-switch" type="checkbox">
				<label class="switch-label" for="attribute_variable-erpfow" style="margin-left: 2px;"></label>
			</td>
		</tr>
	</tbody>
</table>

JavaScript

var $ = jQuery;
 			$('body').on('click', '#singular-atts-list td', function() {
				var _this = $(this);
				if ( !_this.hasClass( 'edit' ) ) {
					_this.html('<input class="edit-attribute" type="text" value="'+_this.text()+'" />');
					_this.children('input').focus();
				}
				_this.addClass('edit');
			});
			$('body').on('focusout', '#singular-atts-list td .edit-attribute', function() {
				var _this = $(this);
				_this.parents('td').html(_this.val);
			});