javascript code running pefectly on codepen, but nothing happening on offline local server

This issue is troubling me for a long time, the script should highlight the element for a few seconds, which is working on codepen but nothing is happening when I’m running it on the offline server through vs code, what could be the reason, my os is ( windows 7), chrome is the latest version, and so does vs code. Beginner here. Thanks
P.s-Not just this but code but some more scripts are not working(only on the localhost server).

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);
  animation: dance infinite linear 0.5s;
}

@keyframes dance {
  0% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
.side-nav {
  display: flex;
  flex-direction: column;
  margin-top: 54px;
  background: rgba(51, 51, 51,1);
  width: 75px;
  height: 657px;
  justify-content: space-around;
  align-items: stretch;
  line-height: 23px;
  position: fixed;
  border: 1px solid rgba(255, 51, 153,0.4);
}

.side-nav button{
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #333;
  color: white;
  flex-wrap: wrap;
  text-align: center;
  margin: 5px;
  border: 1px solid transparent;
}

.side-nav button.active {
  background: #9999ff;
  color: black;
}

.side-nav button:hover:not(.active) {
 background: #555;
 border: 1px solid rgba(255, 51, 153,1);
 color: pink;
}

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="row">

<div class="column">
<img src="https://images.pexels.com/photos/3990301/pexels-photo-3990301.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" id="c4">
<img src="../pics/pexels-alina-vilchenko-4550659.jpg" id="c5" >

</div>