JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    </head>
  <body>
    <div class="centr">
      <img src="2.png" alt="">
      <img src="1.png" alt="">
      <img src="2.png" alt="">
      <img src="1.png" alt="">
      <img src="1.png" alt="">
      <img src="2.png" alt="">

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

    </div>

<script type="text/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++){
  if(rad[i].src="1.png"){
    rad[i].src="2.png"
  }
 else
 {rad[i].src=="1.png";
}
}
}
</script>
</body>
</html>

CSS

*{
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
.centr{
  margin: 0 auto;
  display: flex;
  width: 1400px;
  height:300px;
}
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;
}