JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centr">
      <img src="2.png" alt="2">
      <img src="1.png" alt="1">
      <img src="2.png" alt="2">
      <img src="1.png" alt="1">
      <img src="1.png" alt="1">
      <img src="2.png" alt="2">

    </div>
    <div class="button">
    <p>button</p>

    </div>

CSS

*{
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
.centr{
  margin: 0 auto;
  display: flex;
  width: 1400px;
  height:700px;
  flex-direction: column;
}
.left_block, .right_block{
  padding: 20px;
  width: 700px;
  height: 700px;
  border: 1px solid black;

}
img{
  margin: 10px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.red{
  border:1px solid red;

}
.button{
  width: 100px;
  height: 60px;
  border: 1px solid black;
}

JavaScript

let test = document.querySelectorAll('img');
let but = document.querySelector('.button');
but.onclick = change;
for(let i =0; i<test.length; i++){
  test[i].onclick = adClass;

}
function adClass() {
  this.classList.toggle('red');

}

function change(){
let rad = document.querySelectorAll('.red');

  for(let i=0; i<rad.length; i++){
  console.log('cp ',rad[i].src)
  if(rad[i].src.split("/").pop()=="1.png"){
    rad[i].src="2.png"
    rad[i].alt="2.png"
    console.log(11)
  }
 else {
 	rad[i].src="1.png"
  rad[i].alt="1.png"
 	console.log(22)
 }
}
}