Tengo JavaScript para mostrar/ocultar div al hacer clic. Dentro de ese div hay más botones para mostrar/ocultar PNG.

Quiero que el botón en el que se hizo clic tenga una línea de borde inferior hasta que se haga clic en otro botón en ese div.

He logrado esto, pero cada vez que hago clic en un botón en el div que se muestra, la línea del borde inferior permanece en el botón cuando hago clic en el botón siguiente.

He pasado horas tratando de arreglar esto. por favor ayuda

 let wildCard = document.querySelectorAll(".element-select-container button"); for (let button of wildCard) { button.addEventListener('click', (e) => { const et = e.target; const active = document.querySelector(".active"); let redline = (".redline"); if (active) { active.classList.remove("redline"); active.classList.remove("active"); } et.classList.add("active"); et.classList.add("redline"); let allContent = document.querySelectorAll('.button-wrapper'); for (let content of allContent) { if(content.getAttribute('data-e') === button.getAttribute('data-e')) { content.style.display = "block"; } else { content.style.display = "none"; } } }); }

HTML

 <div class="element-select-container"> <button id="but81" class="but81 redline" data-e="81" type="button" name="">Doors</button> <button id="but82" class="but82" data-e="82" type="button" name="">Windows</button> <button id="but83" class="but83" data-e="83" type="button" name="">Facia</button> <button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button> <button id="but85" class="but85" data-e="85" type="button" name="">Garage</button> <button id="but86" class="but86" data-e="86" type="button" name="">Steps</button> </div>

CSS

 .redline { border-bottom: 2px solid red; }