If/else statement with change image function not working for multiple images

I am very new to javascript and am in need of some help. My goal is to have 3 before photos that you click on to reveal the after photo (dog grooming website). With only one before/after photo the code works fine but with all 3 only the last one functions properly. Any ideas as to what I am doing wrong? If/else statements are still very new for me and not sure if I am using them properly.

enter code here

   <p>Click the dog to <br>show their transformation.</p>

    <img id="dog1" onclick="changeImage()" src="images/dog1before.PNG" width="300" >
    <br>

    <img id="dog2" onclick="changeImage()" src="images/dog2before.PNG" width="300" >
    <br>
    <img id="dog3" onclick="changeImage()" src="images/dog3before.PNG" width="300" >


    <script>

    //dog1 before and after
function changeImage() {
  var image = document.getElementById("dog1");
  if (image.src.match("dog1after")) {
    image.src = "images/dog1before.PNG";
  } else {
      image.src = "images/dog1after.PNG";
  }
}


    //dog2 before and after
function changeImage() {
  var image = document.getElementById("dog2");
  if (image.src.match("dog2after")) {
    image.src = "images/dog2before.PNG";
  } else {
      image.src = "images/dog2after.PNG";
  }
}    

 //dog3 before and after
function changeImage() {
  var image = document.getElementById("dog3");
  if (image.src.match("dog3after")) {
    image.src = "images/dog3before.PNG";
  } else {
      image.src = "images/dog3after.PNG";
  }
}    



</script>