jQuery kodu Vanilla Javascript'e çevirme

S74K3

Merhaba. Sitemdeki jquery bağımlılığını kaldırmak istiyorum.
Aşağıdaki jquery kodunu vanilla javascript'e çevirmem lazım. Yardımcı olursanız sevinirim.

CodePen Linki

jQuery

$(function () {
	$(".replybutton").on("click", function () {
		$(".replybox").hide();
		var commentboxId = $(this).attr("data-commentbox");
		$("#" + commentboxId).toggle();
	});

	$(".cancelbutton").on("click", function () {
		$(".replybox").hide();
	});
});

HTML

<div class="item">
	<p>Comment 1: This is comment 1</p>
	<button class="replybutton" data-commentbox="panel1">Reply</button>
	<div class="replybox" id="panel1" style="display:none">
		<textarea cols="35" rows="3"></textarea>
		<br>
		<button class="cancelbutton">Cancel</button>
	</div>
</div>
<div class="item">
	<p>Comment 2: This is comment 2</p>
	<button class="replybutton" data-commentbox="panel2">Reply</button>
	<div class="replybox" id="panel2" style="display:none">
		<textarea cols="35" rows="3"></textarea>
		<br>
		<button class="cancelbutton">Cancel</button>
	</div>
</div>

Bu şekilde yapmaya çalıştım fakat çalışmadı.

document.addEventListener("DOMContentLoaded", () => {
	document.getElementByClassName("replybutton").on("click", function () {
		document.getElementByClassName("replybox").style.display = "none";
		let commentboxId = this.attr("data-commentbox");
		$("#" + commentboxId).toggle();
	});
	document.getElementByClassName("cancelbutton").on("click", function () {
		document.getElementByClassName("replybox").style.display = "none";
	});
});

KerimCETINBAS


element.addEventListener(eventName: string, calback: prediction <event> ) 

seklinde eventleri dinleyebilirsin

querySelectorAll( cssSelector ) tanima uyan butun elemanlari secip Array seklinde donuyor.
o yuzden hepsine event listeneri eklemek icin forEach, for vs ile dondurmek gerekiyor

<script defer>
document.addEventListener('DOMContentLoaded', () => {
	let toggleEl
	document.querySelectorAll(".replybutton").forEach(el  => {
		el.addEventListener("click", function (e) {
		      if(toggleEl) toggleEl.style.display ="none";
		      const commentboxId = e.target.getAttribute("data-commentbox");
		      toggleEl = document.querySelector("#" + commentboxId);
		      toggleEl.style.display =  toggleEl.style.display === "none" ? "block" : "none";
 
		}); 
	})
	document.querySelectorAll(".cancelbutton").forEach(el => el.addEventListener("click", () =>  toggleEl.style.display = "none" )); 
});
</script>