JSFiddle - React, Tailwind, and code Playground

HTML

<table id="main-table">
  <tr>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  </tr>
   <tr>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  <td contenteditable="true" >Hey</td>
  </tr>
</table>
<button onclick="deleteMode()">Delete Mode</button>

CSS

td, tr, table{
  border: 1px solid black;
  border-collapse: collapse;
}

JavaScript

var delete_mode = false;
var table = document.getElementById('main-table');

		function deleteMode(){
			let tds = document.getElementsByTagName('td');
			if (delete_mode == true){
				table.style.border = null;
				for(let i = 0; i < tds.length; i++){
					tds[i].style.cursor = null;
					tds[i].setAttribute("contenteditable", "true");

					tds[i].removeEventListener("mouseover", function(){ setDeleteBGC(i); });
					tds[i].removeEventListener("mouseout", function(){ removeDeleteBGC(i); });
					tds[i].removeEventListener("click", function(){ deleteEvent(i); });

				}
				delete_mode = false;
			}
			else{
				table.style.border = "solid 2px red";
								
				for(let i = 0; i < tds.length; i++){
					tds[i].style.cursor = "pointer";
					tds[i].removeAttribute("contenteditable");

					tds[i].addEventListener("mouseover", function(){ setDeleteBGC(i); });
					tds[i].addEventListener("mouseout", function(){ removeDeleteBGC(i); });
					tds[i].addEventListener("click", function(){ deleteEvent(i); });

				}
				delete_mode = true;
			}
		}
    
    
    		function setDeleteBGC(index){
			let tds = document.getElementsByTagName('td');
			console.log(index);
			index = Math.floor(index/4) * 4;
			tds[index].style.backgroundColor = 'orange';
			tds[index+1].style.backgroundColor = 'orange';
			tds[index+2].style.backgroundColor = 'orange';
			tds[index+3].style.backgroundColor = 'orange';
		}

		function removeDeleteBGC(index){
			let tds = document.getElementsByTagName('td');
			console.log(index);
			index = Math.floor(index/4) * 4;
			tds[index].style.backgroundColor = null;
			tds[index+1].style.backgroundColor = null;
			tds[index+2].style.backgroundColor = null;
			tds[index+3].style.backgroundColor = null;
		}

		function deleteEvent(index){
			let tds = document.getElementsByTagName('td');
			console.log(index);
			index = Math.floor(index/4) * 4;
			tds[index].innerHTML = '';
			tds[index+1].innerHTML = '';
			tds[index+2].innerHTML =...