Estou começando a aprender html/css/javascript, e estou com um projeto de um site, vou tentar explicar oq eu quero. Eu tenho 3 imagens de espelhos quebrados e quero que ao clicar em cada imagem apareça a foto dentro do espelho, porém n estou conseguindo e quando eu clico na imagem ela troca apenas de um espelho...
 
	 
 
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>TE AMO</title>
    <meta charset="utf-8">
      <link rel="stylesheet" type="text/css"  href="styles.css" />
     
  </head>
  <body>
<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("quadro1").src=a;
    }
</script>
</div>
      <div class="momentos-menu">
      <img src="imagens/momentos.png" class="momentos">
      <div id="quadro">
      <div class="row">
  <div class="coluna"> 
    <img id="quadro1" src="imagens/quadro.png" onclick='changeImage("imagens/quadro-foto-1.png");'>
  </div>
  <div class="coluna">
    <img id="quadro1" src="imagens/quadro.png" onclick='changeImage("imagens/quadro-foto-2.png");'>
  </div>
  <div class="coluna">
    <img id="quadro1" src="imagens/quadro.png" onclick='changeImage("imagens/quadro-foto-3.png");'>
    
  </div></div>
          </div>
      </div>
   
  </body>
</html>