Applying an ‘active’ class to a button isn’t working

I have an image portfolio with filter buttons at the top. When the user selects one of these filters, the button should change colour to show that it is selected. I created a script to handle this, but it’s not working and I’m unsure why it’s not.

HTML:

<div class="dp-projects-button-container" id="dp-projects-button-container" style="margin-bottom: 35px;">

<button id="btn" class="btn active" onclick="filterSelection('all')"> SHOW ALL</button>

<button id="btn" class="btn" onclick="filterSelection('residential_multiunit')"> RESIDENTIAL: MULTI-UNIT</button>

<button id="btn" class="btn" onclick="filterSelection('residential_privatehouses')"> RESIDENTIAL: PRIVATE HOUSES</button>

<button id="btn" class="btn" onclick="filterSelection('offices_fitout')"> OFFICES & FIT-OUT</button>

<button id="btn" class="btn" onclick="filterSelection('sports_leisure')"> SPORTS & LEISURE</button>

<button id="btn" class="btn" onclick="filterSelection('education_childcare')"> EDUCATION & CHILDCARE</button>

<button id="btn" class="btn" onclick="filterSelection('admin_finance')"> ADMINISTRATIVE & FINANCIAL</button>

<button id="btn" class="btn" onclick="filterSelection('retail')"> RETAIL</button>

<button id="btn" class="btn" onclick="filterSelection('industrial_warehousing')"> INDUSTRIAL & WAREHOUSING</button>

<button id="btn" class="btn" onclick="filterSelection('restaurant_public_houses')"> RESTAURANTS & PUBLIC HOUSES</button>

<button id="btn" class="btn" onclick="filterSelection('hotels')"> HOTELS</button>

<button id="btn" class="btn" onclick="filterSelection('health_agedcare')"> HEALTH & AGED CARE</button>
</div>

JAVASCRIPT:

var btnContainer = document.getElementById("dp-projects-button-container");
var btns = btnContainer.getElementsByClassName("btn");

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
}

(I have CSS which applies the colour to .btn.active)

I’ve tried playing around with ‘class’ vs ‘id’, but to no avail. I’ve also triple-checked my class names, css properties and spelling, also to no avail.

I’m fairly new to JavaScript so any help is really appreciated, thanks