[Malleys]

Как сделать, чтобы this работал именно для той кнопки, на которую нажимаешь?

addEventListener("click", event => {
	const parent = event.target.closest(".mybtn3")
	if(!parent) return;
	const fas = parent.querySelector(".fas");
	fas.classList.toggle("fa-angle-up");
	fas.classList.toggle("fa-angle-down");
});

У вас идут одни fa-angle-up и fa-angle-up и fa-angle-down и fa-angle-down... Может достаточно менять на самой кнопке стрелку ▲ или ▼? Это действительно просто и легко и не нужно писать эти ужасные захламляющие проект классы.

<style>

	@font-face {
		font-family: "Up and Down";
		src: url(https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66/up-down.ttf);
	}
	
	.mybtn3 {
		border: none;
		border-radius: 0.25em;
		background: #248;
		color: white;
	}
	
	.mybtn3 .fas {
		font: 2em "Up and Down";
	}
	
</style>

<button class="mybtn3">
	<span class="fas">▼</span>
</button>

<button class="mybtn3">
	<span class="fas">▼</span>
</button>

<script>

	addEventListener("click", event => {
		const parent = event.target.closest(".mybtn3")
		if(!parent) return;
		const fas = parent.querySelector(".fas");
		fas.textContent = fas.textContent !== "▲" ? "▲" : "▼"
	});
	
</script>

Учитывая, что .fas по сути стоит на месте ::before, мы можем вообще удалить этот лишний элемент!

<style>

	@font-face {
		font-family: "Up and Down";
		src: url(https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66/up-down.ttf);
	}
	
	.mybtn3 {
		border: none;
		border-radius: 0.25em;
		background: #248;
		color: white;
	}
	
	.mybtn3::before {
		font: 2em "Up and Down";
		content: "▼";
	}
	
	.mybtn3[data-open="true"]::before {
		content: "▲";
	}
	
</style>

<button class="mybtn3"></button>
<button class="mybtn3"></button>

<script>

	addEventListener("click", event => {
		const parent = event.target.closest(".mybtn3")
		if(!parent) return;
		parent.dataset.open = parent.dataset.open !== "true";
	});
	
</script>