html - show different content in multiple css popups -

i have html/css popup code. want multiple popups in page. when click on popup, first popup's content comes on. how can make them show different content ? thank you.

html

<div id="closed"></div> <a href="#popup" class="popup-link">klik untuk memunculkan popup</a> <div class="popup-wrapper" id="popup"> <div class="popup-container"><!-- konten popup, silahkan ganti sesuai kebutuhan --> <form action="http://www.syakirurohman.net/2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html#" method="post" class="popup-form"> <h2>conent</h2> </div> </form> <!-- konten popup sampai disini--><a class="popup-close" href="#closed">x</a> </div> </div> 

css

a.popup-link { padding:17px 0; text-align: center; margin:7% auto; position: relative; width: 300px; color: #fff; text-decoration: none; background-color: #ffba00; border-radius: 3px; box-shadow: 0 5px 0px 0px #eea900; display: block; } a.popup-link:hover { background-color: #ff9900; box-shadow: 0 3px 0px 0px #eea900; -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; } /* end link popup*//*style untuk popup */ #popup { visibility: hidden; opacity: 0; margin-top: -200px; } #popup:target { visibility:visible; opacity: 1; background-color: rgba(255,255,255,0.7); position: fixed; top:0; left:0; right:0; bottom:0; margin:0; z-index: 99999999999; -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; }@media (min-width: 768px){ .popup-container { width:600px; } } @media (max-width: 767px){ .popup-container { width:100%; } } .popup-container { position: relative; margin:7% auto; padding:30px 50px; background-color: #333; color:#fff; border-radius: 3px; }a.popup-close { position: absolute; top:1px; right:3px; background-color: #fff; padding:7px 10px; font-size: 20px; text-decoration: none; line-height: 1; color:#333; }/* style untuk isi popup */.popup-form { margin:10px auto; } .popup-form h2 { margin-bottom: 5px; font-size: 37px; text-transform: uppercase; } 

here full code minimalist popups.

$('.btn').click(function(){    $('.popup').hide();    $('#' + $(this).attr('data-popup')).show();  });

.popup {    position:absolute;    top:50%;    left:50%;    transform:translate(-50%, -50%);    display:none;    background:#000;    color:#fff;    padding:5px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="popup" id="popup1">    popup 1    </div>        <div class="popup" id="popup2">    popup 2    </div>        <button class="btn" data-popup="popup1">open pop 1</button>    <button class="btn" data-popup="popup2">open pop 2</button>