CSS Customization with jQuery

I'm developing a website and needed a help on a question:

I am making 6 cards with some titles and when I click on a card, it makes a request Ajax fetches some information from the service just below the specific card. This is just a brief explanation.

The deal is that I want to use Ajax , Success , a CSS modification, and I can not think of a good way to inform the element that should be modified

First, follow the HTML and CSS code I used to develop the cards:

           <style>
                .element {
                    box-shadow: 0 8px 50px -6px rgba(84,84,120,.26);
                    padding: 40px 20px 20px;
                    position: relative;
                    background: #fff;
                    cursor: pointer;
                }
                .element h4 {
                    color: #3c9890;
                    font-size: 20px
                }
                .element:hover div i{
                    background: rebeccapurple !important;
                    -webkit-transition: all .5s ease-in-out;
                    -moz-transition: all .5s ease-in-out;
                    -ms-transition: all .5s ease-in-out;
                    -o-transition: all .5s ease-in-out;
                    transition: all .5s ease-in-out;
                }
                .element:hover h4{
                    color: #9e6bd2 !important;
                    transition: all .5s ease-in-out;
                }

                .ti-icone {
                    background: #35b1a6;
                    width: 80px;
                    height: 80px;
                    display: inline-block;
                    line-height: 80px;
                    text-align: center;
                    color: #fff;
                    font-size: 28px;
                    border-radius: 50%;
                }
            </style>

            <div class="col-lg-4 col-md-6 mt-5" id="consultores-id">
                <a data-consult-id="1" href="#consultores-id" class="">
                    <div class="text-center element">
                        <div style="margin-bottom: 25px;">
                            <i class="ti-package ti-icone"></i>
                        </div>
                        <h4>
                            Logística
                        </h4>
                    </div> <!-- feature -->
                </a>
            </div>

            <div class="col-lg-4 col-md-6 mt-5">
                <a>
                    <div class="text-center element">
                        <div style="margin-bottom: 25px;">
                            <i class="ti-headphone-alt ti-icone"></i>
                        </div>
                        <h4>
                            Comercial
                        </h4>
                    </div> <!-- feature -->
                </a>
            </div>

And here's the Javascript script I'm using to fetch additional information there in the database and return it asynchronously to the response-content:

<script>
    $("[data-consult-id]").click(function () {
        let consult_id = $(this).attr("data-consult-id");
        let response = $(".response-content");
        //response.html("<div class='text-center'><i class='fa fas fa-cog fa-spin fa-5x' style='margin-top: 1rem'></i>");
        setTimeout(function(){
            $.ajax({
                url: "response.php?consult_id=" + consult_id,
                type: 'GET',
                success: function (data) {
                    $(response).slideToggle('fast').html(data);
                }
            });
        }, 200);
    });
    $("[data-consult2-id]").click(function () {
        let consult2_id = $(this).attr("data-consult2-id");
        let response = $(".response-content2");
        //response.html("<div class='text-center'><i class='fa fas fa-cog fa-spin fa-5x' style='margin-top: 1rem'></i>");
        setTimeout(function(){
            $.ajax({
                url: "response.php?consult_id=" + consult2_id,
                type: 'GET',
                success: function (data) {
                    $(response).slideToggle('fast').html(data);
                    $().css({backgroundColor: '#663399'});
                }
            });
        }, 200);
    });
</script>

So, the line $ (). css ({backgroundColor: '# 663399'}); is what I need to know. The question is: When I click on a card and the result is returned, I want the < background # 663399 but only when it is active, but how can I specify this for exactly that card, knowing that when I click on the element, it is the < to > that is identified and enabled. How do I get there?

The link to the page is the case if you want to look at the entire project in the entire context: link

Needing other information just enter below and I think I've gone through all the important info. Thanks to all who help.