我已经使用HTML、CSS、JS创建了自定义单选按钮。

现在它可以一次选择多个选项，像3个或4个或2个。我想做的是一次只能选择一个选项。

我想知道是否有一种方法，不是为所有div添加多个具有相同值的‘After’，是否可以为所有4个div添加一个‘After’。

let mainBtns=document.querySelectorAll('#container');

mainBtns.forEach(btn => {   
    btn.addEventListener('click', () => {
        btn.classList.toggle('active');
    });

});

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 20px;
}

.first,.scond,.third,.forth{
    display: flex;
    place-content: center;
    place-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(202, 202, 202);
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 6px 1px #e8eef6;

}

.first::after{
    content: '';
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(78, 78, 78);
    position: absolute;
    vertical-align: middle; 
    visibility: hidden;  
}

.scond::after{
    content: '';
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(78, 78, 78);
    position: absolute; 
    visibility: hidden;
}

.third::after{
    content: '';
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(78, 78, 78);
    position: absolute; 
    visibility: hidden;
}

.forth::after{
    content: '';
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(78, 78, 78);
    position: absolute;
    visibility: hidden;
}

.active::after{
    visibility: visible;
}
.deActive::after{
    visibility: hidden;
}

<div class="main">
        <div id="container" class="first"></div>
        <div id="container" class="scond"></div>
        <div id="container" class="third"></div>
        <div id="container" class="forth"></div>
    </div>