Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also applied to child elements like headings and paragraphs.
let heading = document.querySelectorAll(".sf_day_card_heading");
heading.forEach((el) => {
el.addEventListener('click', (event) => {
heading.forEach((e) => e.classList.remove('bg_yellow'));
event.target.classList.add('bg_yellow');
})
}).bg_yellow {
background: yellow;
}<div class="sf_day_card_heading">
<h5>MON</h5>
<p>January 9</p>
</div>
<div class="sf_day_card_heading">
<h5>MON</h5>
<p>January 9</p>
</div>