How to uncheck all other radio buttons when one is checked

I customized te radio button of bootstrap. Now I am unable to select the radio button i.e. the radio button won’t remain checked. I want the radio buttons to remain checked or I want to be able to select. And I also want to uncheck all other radio buttons once another radio button is selected. How can i do this in javascript. Here is my code of the custom design of the radio button:

HTML:

`<div class="row">
    <div class="col-lg-12 col-md-12 col-12">
        <p class="form-label px-1 mt-3 col-12">Gender</p>                                
    </div>

    <div class="col-lg-6 col-12 gender-div d-flex">
        <div class="col-6 gender-radio-div">
            <p id="gender-male-fake-sibling" class="d-none">dfs</p>
            <label for="gender" class="gender-label" id="frist-label">
                <!-- <input type="radio" name="gender" id="male" class="gender-radio" value="Male"> -->
                <input type="radio" name="gender" id="male" class="gender-radio" value="Male" data-gender="Male">
                <span class="gender-span">Male</span>
            </label>
        </div>
        <div class="col-6 gender-radio-div">
            <p id="gender-male-fake-sibling" class="d-none">dfs</p>
            <label for="gender" class="gender-label">
                <!-- <input type="radio" name="gender" id="female" class="gender-radio" value="Female"> -->
                <input type="radio" name="gender" id="female" class="gender-radio" value="Female" data-gender="Female">
                <span class="gender-span">Female</span>
            </label>
            {% comment %} <input class="form-check-input" type="checkbox" value="">
            <label class="form-check-label" for="flexCheckChecked">Female</label> {% endcomment %}
        </div>
        
    </div>
</div>`

CSS:

.gender-label {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
    border: 1px solid rgb(235, 164, 117);
    border-radius: 50%;
    text-align: center;
    transition: 0.3s;
}

.gender-label:hover {
    border-color: rgb(255, 108, 50);
    background-color: rgb(255, 108, 50);
    color: rgb(0, 0, 0);
    cursor: pointer;
}

.gender-div input{
    display: none;
}

.gender-radio-div{
    position: relative;
}

.gender-radio-div .gender-span{
    position: absolute;
    left: 35px;
    top: 2px;
}

Javascript:

`<script type="text/javascript">
    var radioInputs = document.querySelectorAll('input[type="radio"][name="gender"]');

    radioInputs.forEach(function(input) {
        input.addEventListener('click', function() {

            var clickedName = this.name;
            // uncheck all other radio buttons
            radioInputs.forEach(function(radioInput) {
                if (radioInput.name == clickedName && radioInput != input) {
                    radioInput.checked = false;
                }
            })

            // check the clicked radio button
            this.checked = true;
        });
    });

</script>`

I was expecting that when I select one radio button it should uncheck all other radio buttons. I was hoping if anyone could help me do this using javascript. Please review my code and give feedback.
Thank You