If I got you correctly, the code below is an enterely new way to do what you did
(It is still not correct because it is not clear what the {'html'; 'html2'; 'html3'; 'html4'} are and then how they should be managed)
Please note that I added to each root 'ancor' the event 'onclick' to access directly the clicked element, without the need of all the switch you did. I mean, the chain of 'if-then-else' in the function 'portfolioGrid.addEventListener('click', function(e) {...})'.
Cheers
Vincenzo
<!DOCTYPE html>
<html>
<head>
<title>Questions 5305079</title>
</head>
<body>
</body>
</html>
<script>
try{
debugger;
var html = `
<a href="#" onclick="return pe_onclick(this)" id="PE" class="portfolio__item filter-projects PE projects" data-id="PE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Columbia-Wrightsville Bridge Book Cover" />
<div class="portfolio__clientName">
<h3 id="PE" class="portfolio__clientName-text">Photo Essays</h3>
</div> <!-- end portfolio__clientName -->
</a>
`;
var html2 = `
<a href="#" onclick="return cahq_onclick(this)" id="CAHQ" class="portfolio__item filter-projects PE projects" data-id="PE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="MAYBE IT WORKED??" />
<div class="portfolio__clientName">
<h3 id="CAHQ" class="portfolio__clientName-text2">THE CAT IN THE HAT</h3>
</div>
</a>
`;
var html3 = `
<a href="#" onclick="return tafe_onclick(this)" id="TAFE" class="portfolio__item filter-projects PE projects" data-id="PE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="MAYBE IT WORKED??" />
<div class="portfolio__clientName">
<h3 id="TAFE" class="portfolio__clientName-text3">I THINK IT IS WORKING!!!</h3>
</div>
</a>
`;
var html4 = `
<a href="#" onclick="return pwc_onclick(this)" id="PWC" class="portfolio__item filter-projects PE projects" data-id="PE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="WHO KNOWS??" />
<div class="portfolio__clientName">
<h3 id="PWC" class="portfolio__clientName-text3">YES?!!!</h3>
</div>
</a>
`;
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim();
template.innerHTML = html;
return template.content.firstChild;
}
var pe = htmlToElement(html);
var pet = htmlToElement(html2);
var met = htmlToElement(html3);
var det = htmlToElement(html4);
function pe_onclick(pe){
return false;
}
function cahq_onclick(cahq){
return false;
}
function tafe_onclick(tafe){
return false;
}
function pwc_onclick(pwc){
return false;
}
}
catch(jse){
alert(jse.message);
}
</script>