Toggle between multiple images

Question

I have 4 images black, red, orange and green - and the disabled version in gray. What I want to achieve is that when I click on a disabled one, the other ones should turn gray/disabled and the one clicked should turn to his color image.

I tried following now this will get his child div and will do the toggle trick with the clicked image, but it won't disable the other ones. How can I disable all the other ones?

$('.toggle').each(function() {
  var clickCounter = 0,
    firstEdit = false;
  $(this).on('click', function() {
    clickCounter++;
    if (clickCounter == 1 || firstEdit == true) {
      $(this).toggle();
      $(this).next('.toggled').toggle();

      clickCounter = 0;
      firstEdit = true;
    }
  });
});
$('.toggled').on('click', function() {
  $(this).toggle();
  $(this).prev('.toggle').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="toggle"><img class="" src="data/img/controller/orange.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/orange_disabled.jpg"></div>
<div class="toggle"><img class="" src="data/img/controller/red.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/red_disabled.jpg"></div>
<div class="toggle"><img class="" src="data/img/controller/black.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/black_disabled.jpg"></div>
<div class="toggle"><img class="" src="data/img/controller/green.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/green_disabled.jpg"></div>

Answer 1

You'll need loop through all images in onclick event handler and set proper class on each image. Also note, you could make images look grey with simple css filter, don't need create separate images

const test = document.getElementById("test");
test.addEventListener("click", e =>
{
  for(let i = 0, children = test.children; i < children.length; i++)
  {
    children[i].classList.toggle("selected", children[i] === e.target);
  }
});

.content > img:not(.selected)
{
  filter: saturate(0);
  opacity: 0.5;
}

<span id="test" class="content">
  <img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj">
  <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj">
  <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj">
  <img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj">
</span>

P.S.

Please don't use bloatware jquery, save the planet.