Both popups are appearing at the same time instead of one after another

Both popups are appearing at the same time instead of one after another

Hello, look at these two popups that i have created.

first popup is "image of a house with click here text"
second popup is "name/email etc. submit form"

now the problem is as you can see on the "Tryit editor", both popups are visible at the same time.

but i need the first popup to appear first and when a visitor clicks"click here" text, first popup should disappear and email submit popup should appear. 

  2. <!-- POP UP Start --><!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
  3.  <script>
  4.       $(document).ready(function(){
  5.          $('#overlay').fadeIn(500,function(){
  6.             $('#popup').show();
  7.          });
  8.  
  9.          $(".close").on('click', function() {
  10.             $('#popup').hide();
  11.             $('#overlay').fadeOut(500);
  12.          });
  13.       });
  14.    </script>
  15. <div id="overlay" style ="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; filter: alpha(opacity=60); z-index: 5; display: none"></div>
  16. <div id="popup" style="position:fixed; display:hidden; top:250px; left:50%; width:500px; height:auto; margin-left:-250px; background-color:#FFFFFF; z-index:6; padding:20px; border:solid 5px #2A1D9E; border-radius:5px;">
  17. <a href=https://www.google.com class="close" style="display: block; float:right; position:relative; top:-15px; right: -15px; height: 20px; color:#FFFFFF;">X</a>
  18. <p style=color:#FFFFFF;">
  19. </p>
  20. <p style="margin:0; padding:5px; text-align:justify;">
  21. <a href=https://www.google.com><img class="aligncenter wp-image-21 size-full" src=https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg alt="ALT TEXT" width="500" height="300" /></a>
  22. </p>
  23. <a href=https://www.google.com style="margin:0; padding:5px; text-align:right; float:right; color:#333333;">CLICK HERE</a>
  24. </div>]

  26. <div id="overlay" style ="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; filter: alpha(opacity=60); z-index: 5; display: none"></div>
  27. <div id="popup" style="position:fixed; display:hidden; top:150px; left:50%; width:500px; height:auto; margin-left:-250px; background-color:#FFFFFF; z-index:6; padding:20px; border:solid 5px #2A1D9E; border-radius:5px;">
  28.    <p style=color:#FFFFFF;"></p>
  29.    <h2>Please enter your details to send the goods</h2>
  30.    Name:<br>
  31.    <input type="text" name="name"><br>
  32.    E-mail:<br>
  33.    <input type="text" name="mail"><br>
  34.    Comment:<br>
  35.    <input type="text" name="comment" size="50"><br><br>
  36.    <input type="submit" onclick="location.href='http://google.com';"value="Send">
  37.    <input type="reset" onclick="location.href='http://google.com';" value="Reset">
  38. </div>
  39. <!-- POP UP End -->