JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<input type="checkbox" class="checkbox" id="qwe1">
				</td>
				<td class="name-list">
					<p class="p_input">Name 1</p>
				</td>
				<td class="editing-list">
					<div class="editing">
						<button class="editing-name"> Editing </button>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="checkbox" id="qwe2">
				</td>
				<td class="name-list">
					<p class="p_input">Name 2</p>
				</td>
				<td class="editing-list">
					<div class="editing">
						<button class="editing-name"> Editing </button>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="checkbox" id="qwe3">
				</td>
				<td class="name-list">
					<p class="p_input">Name 3</p>
				</td>
				<td class="editing-list">
					<div class="editing">
						<button class="editing-name"> Editing </button>
					</div>
				</td>
			</tr>
		</table>
		<script>
			document.addEventListener(`click`, e => {
				if (e.target.classList.contains(`editing-name`)) {
					let paragraph = e.target.parentElement.parentElement.previousElementSibling.firstElementChild;
					paragraph.style.background = paragraph.style.background === `` ? `red` : ``;
					paragraph = null;
				}
			});
		</script>
	</body>
</html>