Как правильно прописать код в функции на js?

Question

[eldgammel]

У меня есть три кнопки, у всех уникальный id. Есть функция на javascript - эта функция добавляет рамку кнопке.
нажимаю на одну кнопку - рамка добавилась, нажимаю на вторую кнопку у первой кнопки рамка должна исчезнуть, а у второй добавиться, аналогично с третьей, как это сделать?
html

<div id="border_1" class="product main-border">
    <a onclick="myBorder()"><img src="img/baluster.png" class="image"></a>
   <h5>ZEMİN ÜSTÜ</h5>
</div>
<div id="border_2" class="product main-border">
    <a onclick="myBorder()"><img src="img/baluster.png" class="image"></a>
   <h5>ZEMİN ÜSTÜ</h5>
</div>
<div id="border_3" class="product main-border">
    <a onclick="myBorder()"><img src="img/baluster.png" class="image"></a>
   <h5>ZEMİN ÜSTÜ</h5>
</div>

js

function myBorder() {
     if (document.getElementById("border_1").classList.contains("border") == true) {
         document.getElementById("border_2").classList.remove("border")
         document.getElementById("border_3").classList.remove("border");
    } else {
        document.getElementById("border_1").classList.toggle("border");
    }
if (document.getElementById("border_2").classList.contains("border") == true) {
         document.getElementById("border_1").classList.remove("border")
         document.getElementById("border_3").classList.remove("border");
    } else {
        document.getElementById("border_2").classList.toggle("border");
    }
if (document.getElementById("border_3").classList.contains("border") == true) {
         document.getElementById("border_2").classList.remove("border")
         document.getElementById("border_1").classList.remove("border");
    } else {
        document.getElementById("border_3").classList.toggle("border");
    }
}

Comments

[DanKud]

Лучше это сделать не так как у вас, а по другому. Например так:

<div class="product main-border">
    <a><img src="img/baluster.png" class="image"></a>
    <h5>ZEMİN ÜSTÜ</h5>
</div>
<div class="product main-border">
    <a><img src="img/baluster.png" class="image"></a>
    <h5>ZEMİN ÜSTÜ</h5>
</div>
<div class="product main-border">
    <a><img src="img/baluster.png" class="image"></a>
    <h5>ZEMİN ÜSTÜ</h5>
</div>

let wrappers = document.querySelectorAll('.product');

document.querySelectorAll('.product > a').forEach(n => {
    n.addEventListener('click', function () {
        wrappers.forEach(n => {
            n.classList.remove('border');
        });
        this.parentNode.classList.add('border');
    });
})