html – repair the Second dropdown which isn’t working?

I’ve created a drop-down which is working correctly however I would like so as to add yet another subsequent to the primary one. However once I repeated the identical HTML code subsequent to first one, solely first one is working. So, I would like a repair so each of them work independently. I’ve tried however could not do it. I’m posting the html and CSS code under please have look. Please assist me to repair it.

.dropwrap {
    padding: 0;
    list-style: none;
    background: clear;
    float: left;
    margin-top: 30px;
}

.sec-center {
    place: relative;
    max-width: 100%;
    text-align: middle;
    z-index: 200;
    show: inline-block;
    margin-right: 5px;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    place: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.dropdown:checked+label,
.dropdown:not(:checked)+label {
    place: relative;
    font-family: calibri, sans-serif;
    font-weight: 500;
    font-size: 14px;
    /* line-height: 2; */
    /* top: 50px; */
    transition: all 200ms linear;
    /* border-radius: 4px; */
    /* width: 220px; */
    letter-spacing: 1px;
    show: -webkit-inline-flex;
    show: -ms-inline-flexbox;
    show: inline-flex;
    -webkit-align-items: middle;
    -moz-align-items: middle;
    -ms-align-items: middle;
    align-items: middle;
    -webkit-justify-content: middle;
    -moz-justify-content: middle;
    -ms-justify-content: middle;
    justify-content: middle;
    -ms-flex-pack: middle;
    text-align: middle;
    border: none;
    background-color: clear;
    cursor: pointer;
    shade: #fff;
    /* box-shadow: 0 12px 35px 0 rgb(255 235 167 / 15%); */
    padding: 4px 20px;
    border-right: 2px strong #fff;
    border-radius: 50px;
}

.dropdown:checked+label:earlier than,
.dropdown:not(:checked)+label:earlier than {
    place: fastened;
    high: 0;
    left: 0;
    content material: '';
    width: 100%;
    top: 100%;
    z-index: -1;
    cursor: auto;
    pointer-events: none;
}

.dropdown:checked+label:earlier than {
    pointer-events: auto;
}

.dropdown:not(:checked)+label .uil {
    content material: '';
    place: absolute;
    proper: 6px;
    rework: rotate(0deg);
    width: 0;
    top: 0;
    border-left: 4px strong clear;
    border-right: 4px strong clear;
    border-top: 4px strong #fff;
}

.dropdown:checked+label .uil {
    content material: '';
    place: absolute;
    proper: 6px;
    rework: rotate(180deg);
    width: 0;
    top: 0;
    border-left: 4px strong clear;
    border-right: 4px strong clear;
    border-top: 4px strong #fff;
}

.dropdown:checked~.section-dropdown {
    opacity: 1;
    pointer-events: auto;
    rework: translateY(0);
}

.section-dropdown {
    place: absolute;
    padding: 5px;
    background-color: #004287;
    high: 41px;
    left: 0;
    width: 100%;
    border-radius: 4px;
    show: block;
    /* box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4); */
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    rework: translateY(20px);
    transition: all 200ms linear;
}

.section-dropdown:earlier than {
    place: absolute;
    high: -20px;
    left: 0;
    width: 100%;
    top: 20px;
    content material: '';
    show: block;
    z-index: 1;
}

.section-dropdown:after {
    place: absolute;
    high: -7px;
    left: 30px;
    width: 0;
    top: 0;
    border-left: 8px strong clear;
    border-right: 8px strong clear;
    border-bottom: 8px strong #c82333;
    content material: '';
    show: block;
    z-index: 2;
    transition: all 200ms linear;
}

.section-dropdown a {
    place: relative;
    shade: #fff;
    transition: all 200ms linear;
    font-family: calibri, sans-serif;
    font-weight: 500;
    font-size: 14px;
    border-radius: 2px;
    padding: 5px 0;
    padding-left: 20px;
    padding-right: 15px;
    margin: 2px 0;
    text-align: left;
    text-decoration: none;
    show: -ms-flexbox;
    show: flex;
    -webkit-align-items: middle;
    -moz-align-items: middle;
    -ms-align-items: middle;
    align-items: middle;
    justify-content: space-between;
    -ms-flex-pack: distribute;
}

.section-dropdown a:hover {
    shade: #000;
    background-color: #FBBC05;
}

.section-dropdown a .uil {
    font-size: 22px;
}

.dropdown-sub:checked+label,
.dropdown-sub:not(:checked)+label {
    place: relative;
    shade: #fff;
    transition: all 200ms linear;
    font-family: calibri, sans-serif;
    font-weight: 500;
    font-size: 14px;
    border-radius: 2px;
    padding: 5px 0;
    padding-left: 20px;
    padding-right: 15px;
    text-align: left;
    text-decoration: none;
    show: -ms-flexbox;
    show: flex;
    -webkit-align-items: middle;
    -moz-align-items: middle;
    -ms-align-items: middle;
    align-items: middle;
    justify-content: space-between;
    -ms-flex-pack: distribute;
    cursor: pointer;
}

.dropdown-sub:checked+label .uil,
.dropdown-sub:not(:checked)+label .uil {
    font-size: 22px;
}

.dropdown-sub:not(:checked)+label .uil {
    content material: '';
    place: absolute;
    proper: 6px;
    rework: rotate(0deg);
    width: 0;
    top: 0;
    border-left: 4px strong clear;
    border-right: 4px strong clear;
    border-top: 4px strong #fff;
}

.dropdown-sub:checked+label .uil {
    content material: '';
    place: absolute;
    proper: 6px;
    rework: rotate(180deg);
    width: 0;
    top: 0;
    border-left: 4px strong clear;
    border-right: 4px strong clear;
    border-top: 4px strong #fff;
}

.dropdown-sub:checked+label:hover,
.dropdown-sub:not(:checked)+label:hover {
    shade: #000;
    background-color: #FBBC05;
}

.section-dropdown-sub {
    place: relative;
    show: block;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    max-height: 0;
    padding-left: 10px;
    padding-right: 3px;
    overflow: hidden;
    transition: all 200ms linear;
}

.dropdown-sub:checked~.section-dropdown-sub {
    pointer-events: auto;
    opacity: 1;
    max-height: 999px;
}

.section-dropdown-sub a {
    font-size: 14px;
}

.section-dropdown-sub a .uil {
    font-size: 20px;
}

                    <div class="dropwrap">

                        <div class="sec-center">
                            <enter class="dropdown" kind="checkbox" id="dropdown" title="dropdown" />
                            <label class="for-dropdown" for="dropdown">Companies<i class="uil uil-arrow-down"></i></label>
                            <div class="section-dropdown">
                                <a href="#">Inside Dropdown Hyperlink 1 <i class="uil uil-arrow-right"></i></a>
                                <enter class="dropdown-sub" kind="checkbox" id="dropdown-sub" title="dropdown-sub" />
                                <label class="for-dropdown-sub" for="dropdown-sub">Dropdown Sub 1 <i class="uil uil-plus"></i></label>
                                <div class="section-dropdown-sub">
                                    <a href="#">Dropdown Sub Hyperlink 1 <i class="uil uil-arrow-right"></i></a>
                                    <a href="#">Dropdown Sub Hyperlink <i class="uil uil-arrow-right"></i></a>
                                </div>
                                <a href="#">Inside Dropdown Hyperlink 1 <i class="uil uil-arrow-right"></i></a>
                                <a href="#">Inside Dropdown Hyperlink 1 <i class="uil uil-arrow-right"></i></a>
                            </div>
                        </div>
                        <div class="sec-center">
                            <enter class="dropdown" kind="checkbox" id="dropdown" title="dropdown" />
                            <label class="for-dropdown" for="dropdown">Class<i class="uil uil-arrow-down"></i></label>
                            <div class="section-dropdown">
                                <a href="#">Inside Dropdown Hyperlink 2 <i class="uil uil-arrow-right"></i></a>
                                <enter class="dropdown-sub" kind="checkbox" id="dropdown-sub" title="dropdown-sub" />
                                <label class="for-dropdown-sub" for="dropdown-sub">Dropdown Sub 2 <i class="uil uil-plus"></i></label>
                                <div class="section-dropdown-sub">
                                    <a href="#">Dropdown Sub Hyperlink 2<i class="uil uil-arrow-right"></i></a>
                                    <a href="#">Dropdown Sub Hyperlink <i class="uil uil-arrow-right"></i></a>
                                </div>
                                <a href="#">Inside Dropdown Hyperlink 2 <i class="uil uil-arrow-right"></i></a>
                                <a href="#">Inside Dropdown Hyperlink 3 <i class="uil uil-arrow-right"></i></a>
                            </div>
                        </div>

                    </div>