Using multiple links for a single modal - html

Question

Ok, so I'm attempting to put multiple modal links on a single page, but when each one is clicked, the same modal opens up for all the links because they all use #target-content. I really like this specific modal, but is there a way not have the same modal open up based on the code below? Thank you!
HTML
Open A Modal
<div id="target-content">
<div id="target-inner">
<h2>Modal Heading</h2>
<p>Modal Content</p>
</div>
</div>
CSS
#target-content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content:target {
pointer-events: all;
opacity: 1;
}
#target-content #target-inner {
position: absolute;
display: block;
padding: 48px;
line-height: 1.8;
width: 70%;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
#target-content #target-inner h2 { margin-top: 0; }
#target-content #target-inner code { font-weight: bold; }
#target-content a.close {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #34495E;
opacity: 0.5;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content a.close:hover { opacity: 0.4; }

Answer 1

Your only supposed to use the #id-name once.
Change the name of the id's #target-content, #target-content1 etc..,
You can use the same css styling with a .class-name but #id-names are supposed to be unique.