Ediable table with vanilla js

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/kimera.min.css">
<div class="is-full-screeen">
  <h1 class="margin-b-3">Edición de <danger>tablas con JS</danger></h1>
	<responsive class="is-table">
		<table class="is-cell color-cloud is-narrow">
			<thead class="is-text-upper">
				<tr>
					<th>Name</th>
					<th>Last name</th>
					<th>Email</th>
					<th>number</th>
					<th>Options</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="edit-control">Jordan</td>
					<td class="edit-control">Prieto</td>
					<td class="edit-control">[email protected]</td>
					<td class="edit-control">+52 55 65 42 12</td>
					<td>
						<button class="is-info is-small is-rounded editar-fila">Editar</button>
					</td>
				</tr>
				<tr>
					<td class="edit-control">Jorge</td>
					<td class="edit-control">Antra</td>
					<td class="edit-control">[email protected]</td>
					<td class="edit-control">+52 55 00 76 87 22</td>
					<td>
						<button class="is-info is-small is-rounded editar-fila">Editar</button>
					</td>
				</tr>
				<tr>
					<td class="edit-control">Elver</td>
					<td class="edit-control">Galarga</td>
					<td class="edit-control">[email protected]</td>
					<td class="edit-control">+52 55 36 89 00 08</td>
					<td>
						<button class="is-info is-small is-rounded editar-fila">Editar</button>
					</td>
				</tr>
				<tr>
					<td class="edit-control">Jonh</td>
					<td class="edit-control">Doe</td>
					<td class="edit-control">[email protected]</td>
					<td class="edit-control">+52 01 22 45 78</td>
					<td>
						<button class="is-info is-small is-rounded editar-fila">Editar</button>
					</td>
				</tr>
			</tbody>
		</table>
	</responsive>
	<center class="padding-v-2">
		<button class="is-rounded is-success margin-h-1">Guardar edición</button>
		<button class="is-rounded is-danger margin-h-1">Cancelar edición</button>
</div>

CSS

table {
  margin: 0 auto;
}

JavaScript

var buttonControl = document.querySelectorAll('.editar-fila');
var contentEditable, contenido, isEdit = false;

for (var i = 0; i < buttonControl.length; i++) {
	buttonControl[i].addEventListener('click', modify, false);
}

function modify() {
	contentEditable = this.parentNode.parentElement.querySelectorAll('.edit-control');

	if (isEdit == false) {
		isEdit = true;
		validateButton(this, 'is-info', 'is-success', 'Guardar');

		for (var i = 0; i < contentEditable.length; i++) {
			contentEditable[i].contentEditable = true;
		}
	}else {
		isEdit = false;
		validateButton(this, 'is-success', 'is-info', 'Editar');
		for (var i = 0; i < contentEditable.length; i++) {
			contentEditable[i].contentEditable = false;
		}
	}
}

function validateButton(e, clase, newClass, textButton) {	
	if(e.classList.contains(clase)) {
		e.classList.remove(clase);
		e.classList.add(newClass);
		e.textContent = textButton;
	}
}