Problème dropdown déroulant

Bonjour,

Voila je rencontre un petit problème avec mon code, je cherche à afficher les trois menu déroulant du dropdown sur une même page le problème c'est que j'en ai qu'une qui fonctionne et sur les autres quand je clique dessus rien ne se passe voillà mon code

Le code HTML

  <div id="dpd" class="wrapper-dropdown" tabindex="1">
    <span>Ville</span>
    <ul class="dropdown">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    </ul>
    </div>
                    <div id="dpd" class="wrapper-dropdown" tabindex="1">
                        <span>Type de console</span>
                        <ul class="dropdown">
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                        </ul>
                    </div>
                    <div id="dpd" class="wrapper-dropdown" tabindex="1">
                        <span>Type de jeux</span>
                        <ul class="dropdown">
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                        </ul>
                    </div>

Le code CSS

.wrapper-dropdown {
    position: relative;
    margin: 8% 0 10% 0;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    cursor: pointer;
    outline: none;
    color: #5b5b5d;
}

.wrapper-dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}

.wrapper-dropdown .dropdown {
    position: absolute;
    left: 0;
    right: 0;
    max-height: 380px;
    overflow: auto;
    padding: 0;
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    list-style: none;
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown .dropdown li a {
    display: block;
    padding: 10px;
    color: #576987;
}

.wrapper-dropdown .dropdown li:hover a {
    background: #f3f8f8;
}

.wrapper-dropdown.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

Le code JS

function DropDown(el) {
    this.dpd = el;
    this.placeholder = this.dpd.children('span');
    this.opts = this.dpd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
    var obj = this;
        obj.dpd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
});

obj.opts.on('click',function(){
    var opt = $(this);
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text(obj.val);
});
},
    getValue : function() {
        return this.val;
},

getIndex : function() {
    return this.index;
    }
}

$(function() {

    var dpd = new DropDown( $('#dpd') );
        $(document).click(function() {
            // all dropdowns
            $('.wrapper-dropdown').removeClass('active');
    });

});