show different content in multiple css popups - html

Question

I have this html/css popup code. I want multiple popups in my page. But when I click on another popup, the first popup's content comes on. How can I make them to show different content ? Thank you.
html
<div id="closed"></div>
Klik untuk memunculkan Popup
<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;
}

Answer 1

Here is full code for 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>