Dropdown Box Duplication - duplicates

Question

I have got a problem with this dropdown box, I didn't want to keep adding a number at the end of the code because it seemed to be a bit of daunting task to do, but I was wondering if there is a quicker solution to this process, If there is the help would be great, I can't use java script either, the program I am using doesn't like it for some reason.
Many Thanks
/* Dropdown box */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.dropdown > label,
.dropdown > a[role="button"] {
display: inline-block;
padding: 4px 90px;
color: #fff;
background: #131f6b;
line-height: 1.5em;
text-decoration: none;
border: 2px solid #e03a40;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dropdown > label:hover,
.dropdown > a[role="button"]:hover,
.dropdown > a[role="button"]:focus {
border-color: #e03a40;
}
.dropdown > label:after,
.dropdown > a[role="button"]:after {
content: "\f0d7";
font-family: FontAwesome;
display: inline-block;
margin-left: 6px;
}
.dropdown > ul {
position: absolute;
z-index: 999;
display: block;
left: -100vw;
top: calc(1.5em + 14px);
border: 2px solid #e03a40;
background: #131f6b;
padding: 6px 0;
margin: 0;
list-style: none;
width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);
-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.dropdown > ul a {
display: block;
padding: 6px 15px;
text-decoration: none;
color: #ffffff;
}
.dropdown > ul a:hover,
.dropdown > ul a:focus {
background: #50bc08;
}
.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
left: 0;
}
.dropdown > [type="checkbox"]:checked + label:after,
.dropdown > ul:target ~ a:after {
content: "\f0d8";
}
.dropdown a.close {
display: none;
}
.dropdown > ul:target ~ a.close {
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-indent: -100vw;
z-index: 1000;
}
<p class="style2" style="color: #131f6b; text-align: left;"><strong>Example Header</strong></p>
<p class="style2" style="color: #e03a40; text-align: left;"><strong>Example of Product</strong></p>
<div class="dropdown"><input id="my-dropdown" name="my-checkbox" type="checkbox" value="" />
<label for="my-dropdown" data-toggle="dropdown">
Please Select the Document</label>
<ul>
<li>Example Document</li>
</ul>
</div>