<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />


    <link rel="stylesheet" href="index.css" />
</head>

<body>
 
    <i id="first-favorites-icon" class="favorites-icon"></i>
 
    <i id="second-favorites-icon" class="favorites-icon"></i>
 
    <i id="third-favorites-icon" class="favorites-icon" disabled></i>
  
    <script src="index.js"></script>
</body>

</html>
body {
  margin: 10;
  padding: 0;
  display: inline-block;
}

.favorites-icon {
  background-color: #ccc;
  display: block;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.favorites-icon.on {
  background-color: yellow;
}


const target1 = document.getElementById('first-favorites-icon');
const target2 = document.getElementById('second-favorites-icon');
const target3 = document.querySelector('i.third-favorites-icon');

var targets = document.querySelectorAll('i.favorites-icon');

function handleClick() {
 
 
  for(const key of targets){
    this.classList.toggle('on' ?  disabled: 'on'
  )
 
  console.log('works');
}
for (const key of targets) {
  key.addEventListener('click', handleClick);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.