how to select multiple elements with the same class but have diffrent data attribute to make a specific logic js or jquery?

Question

I'm trying to select multiple elements with the same class but have diffrent data attribute (contains different numbers), to make logic:

elements like this:

<div class="headerCardColor" data-id="{{$card->id}}" style="border-top: 10px;">text here<div> // (data-id) is a unique number from database
<div class="headerCardColor" data-id="{{$card->id}}" style="border-top: 10px;">text here<div>
<div class="headerCardColor" data-id="{{$card->id}}" style="border-top: 10px;">text here<div>
<div class="headerCardColor" data-id="{{$card->id}}" style="border-top: 10px;">text here<div>

I want when click on any above element this element shows:

<div id="updateCard" data-id="{{$card->id}}" style="display:none;">
<input value="" type="hidden" class="form-control" id="cardId">
</div>

and the input with id (cardId) become the data-id value of the specific element that user click on it, I did this logic but the issuse is:

i want to change style of element with id (headerCardColor) that user click on it with different border-color like this:

<div id="headerCardColor" data-id="{{$card->id}}" style="border-top: 10px solid #specificColor;">text here<div> // (data-id) is a unique number from database

and for example when user click on second element with class (headerCardColor), its style changes with specific border-color and the old element return without this style border?

I'll explain with images if misunderstand: I've elments like this:

when user click on first element, its border-top change and another elment shows like this:

when user click on second element i want the border-color in the second element shows and disappear from the first element and so on ? I tried alot but noway

my script like that:

$(document).on('click', '#headerCardColor', function (e) {
e.preventDefault()
var cardId = $(this).data('id');
var idEdit = $('#cardId').val(cardId);
var cardIdEdit = $('#cardId').val()

for (const cards of document.querySelectorAll(".headerCardColor")) {
    if (cardId = cardIdEdit) {
        $('.headerCardColor').attr('style', 'border-top: 10px solid #0D67CB; background: #F5F7FA 0% 0% no-repeat padding-box; border-radius: 15px; display: grid');
    } else {
        $('.headerCardColor').attr('style', 'border-top: 10px; background: #F5F7FA 0% 0% no-repeat padding-box; border-radius: 15px; display: grid');
    }
}
$("#updateCard").show();

});

any idea please

Answer 1

I solved the problem by this approch:

function changeCardHeaderColor(cardIdEdit){
    $('.headerCardColor').each(function (i, obj) {
        // loop on all headerCardColor class to reset them to the default style
        $(".headerCardColor").attr('style', 'border-top: 10px; background: #F5F7FA 0% 0% no-repeat padding-box; border-radius: 15px; display: grid');
    });
    // apply new style in the class that contains specific data-id
    $(`.headerCardColor[data-id="${cardIdEdit}"]`).attr('style', 'border-top: 10px solid #0D67CB; background: #F5F7FA 0% 0% no-repeat padding-box; border-radius: 15px; display: grid');
}

$(document).on('click', '#editCard', function (e) {
    e.preventDefault()
    var cardId = $(this).data('id');
    var idEdit = $('#cardId').val(cardId);
    var cardIdEdit = $('#cardId').val()
    changeCardHeaderColor(cardIdEdit);

    $("#updateCard").show();

    $('input[name="contactsCheckboxEdit"]').each(function () {
        this.checked = false;
    });

    $.get("{{url("card/show")}}" + "/" + cardId, function (data) {
        const ids = data.contactsThatInCard;
        $('#editCardName').val(data.card.name);
        for (const checkbox of document.querySelectorAll("#contactsCheckboxEdit[name=contactsCheckboxEdit]")) {
            if (ids.includes(Number(checkbox.value))) {
                checkbox.checked = true;
            }
        }
    })
});