Eventlistner to work on single button javascript

Question

I want the element to be highlighted only when "8k" is pressed not the other buttons, I know querySelectorAll is the key but don't know what change to make? Beginner here. Thanks

Javascript

const image = document.getElementById("c4");
let timeoutID;
document.querySelectorAll(".side-nav button").forEach(item => item.addEventListener("click", dance));

function dance() {
  image.classList.add('highlight');
  timeoutID = setTimeout(() => { 
    image.classList.remove('highlight');
    clearTimeout(timeoutID);
  }, 1000)
} 

CSS

.highlight {
  box-shadow : 0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

HTML

<div class="side-nav">
  <button href="#" style="order:3">2k</button>
  <button href="#" style="order:2">4k</button>
  <button href="#" style="order:4">1080p</button>
  <button href="C4" style="order:1">8k</button>
</div>
<div class="column">
  <img src="../pics/-vine-3404474.jpg" id="c4">
  <img src="../pics/-alina-vilchenko-4550659.jpg" >
  <img src="../pics/-ceejay-talam-8836293.jpg">
</div>

Answer 1

At the javascript level, there are small changes. When you click on the button you get an event object.

function dance(e) {

if(e.target.innerHTML=="8k"){
  image.classList.add('highlight');
  timeoutID = setTimeout(() => { 
    image.classList.remove('highlight');
    clearTimeout(timeoutID);
  }, 1000);
 }
}