jquery get values of multiple button clicked in twig

Question

i put a button in loop of ring and loop or jewel each, so i can get the value of the selected ring and jewel each. However, i can only select one among ring and jewel. when i click ring and then jewel, the ring button that i selected is no longer focused. How can i separate them so that i can only select one in ring and one in jewel?

this is the styles

<style>
        .button{
            border: none;
            background-color: #fff;
        }
        .button:focus{
            border: 3;
            background-color: #000;
        }
        .button2{
            border: none;
            background-color: #fff;
        }
        .button2:focus{
            border: 3;
            background-color: #000;
        }
    </style>

this is the javascript

$(".button").click(function(){
        var value = $(this).val();
        //alert(value);
    })
    $(".button2").click(function(){
        var value = $(this).val();
        //alert(value);
    })

this is the twig

<div>
    {% set idx = 0 %}
    {% for ring in rings %}
    <div class="row g-0 mb-5">
        <div class="text-center ">
            
            {% set path = 'customRing/ring/' ~ring.ring_shape~ '/' %}
            <button class="button" value = "{{ring.id}}">
                <img src="{{ asset(ring_images[idx], 'save_image') }}" width="150", height="150">
            </button>
            {% set idx = idx + 1 %}
            <p>Ring Name: {{ ring.ring_name }}</p>
            <p>Ring Type: {{ ring.ring_type }}</p>
            <p>Ring Shape: {{ ring.ring_shape }}</p>
            <p>Ring Size: {{ ring.size }}</p>
            <p>Price: {{ ring.price }}</p>
        </div>
        <br>
    </div>
    {% endfor %}
</div>
<div>
    <br><br>

    {% for jewel in jewels %}
    <div class="row g-0 mb-5">
        <div class="text-center ">
            <p>Ring Name: {{ jewel.jewel_name }}</p>
            <p>Ring Type: {{ jewel.jewel_rotation }}</p>
            <p>Price: {{ jewel.price }}</p>
            <button class="button2" value = "{{jewel.id}}">
                {% set path = 'customRing/jewel/' ~jewel.image_name~%}
                <img src="{{ asset(path, 'save_image') }}" width="150", height="150">
            </button>
        </div>
        <br>       
    </div>
    {% endfor %}   
</div>

Answer 1

i changed css and jquery to this and it's working

$(document).ready(function () {
        var ring_button = $(".button").on("click", function () {
            $(".button").removeClass("active");
            $(this).addClass("active");
        });
        var jewel_button = $(".button2").on("click", function () {
            $(".button2").removeClass("active");
            $(this).addClass("active");
        });
    });

.button{
            border: none;
            background-color: #fff;
        }
        .button:focus{
            border: 3;
            background-color: #000;
        }
        .button2{
            border: none;
            background-color: #fff;
        }
        .button2:focus{
            border: 3;
            background-color: #000;
        }
        .active {
            border: 4px solid #FFCC00;
            outline:0;
        }