when clicking on an image next image come

<a href="https://www.google.com/search?q=pug">
        <img src="https://s3.amazonaws.com/freecodecamp/pug.jpg" alt="pug" id="pug">
      </a>
      <img src="https://s3.amazonaws.com/freecodecamp/pug-2.jpg" alt="pug-2" id="pug-2">
      
      <script>
        document.getElementById("pug").addEventListener("click", function() {
          document.getElementById("pug").style.display = "none";
          document.getElementById("pug-2").style.display = "block";
        });
      </script>