Glyphicon color change if product is in cart

Question

I have webshop, and I want user to know if product is in cart already by changing glyphicon-shopping-cart color. This is what I tried:

´´´

$.ajax({
                type: 'GET',
                url: '/api/Selections',
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('accessToken')
                },
                success: function (data) {
                    $.each(data, function (i, val) {
                        if (val.Language == 'Suomi' && val.Season == '1/2020') {
                            //luodaan taulukko, johon arvot tuodaan halutuista sarakkeista
                            selection +=
                                '<tr >' +
                                "<td hidden>" + val.BookID + "</td>" +
                                "<td>" + val.ISBN + "</td>" +
                                "<td>" + val.Author + "</td>" +
                                "<td>" + val.BookName + "</td>" +
                                "<td>" + val.Publisher + "</td>" +
                                "<td>" + val.Price + "€ </td>" +
                                "<td><a href='#'><span class='glyphicon glyphicon-shopping-cart'></span></a></td>" +
                                "<td id='inCart'></td>" +
                                '</tr>';
                          // Change glyphicon color if product is in cart
                            $(function () {
                                $.ajax({
                                    type: 'GET',
                                    url: '/api/carts',
                                    dataType: 'json',
                                    success: function (cart) {
                                        $.each(cart, function (i, cartdata) {
                                            if (cartdata.CompanyID == JSON.parse(localStorage.getItem('userName')) && cartdata.IsInCart == true && val.ISBN == cartdata.ISBN) {

                                                $(".glyphicon-shopping-cart").css("color", "#29d646");
                                                // This in not working, all glyphicons change color 
                                            }
                                        })
                                    }
                                })
                            });
                        }
                    });

´´´

Problem with this code is that all glyphicons in table change color, not only those rows where carts ISBN matches to tables ISBN. I now how to do this on button click, but when user goes to another page, those colors disappear. I tried to use localStorage, but same problem there. How can do this? Or is there another way to do this?

Answer 1

you are selecting all glyphicon-shopping-cart to match current icon you can insert data-id and match them , since i cant see results from val.ISBN and cartdata.ISBN i will wtite you example how it must be look

Here set data-id for icons in table

"<td><a href='#'><span class='glyphicon glyphicon-shopping-cart' data-id="+val.ISBN+"></span></a></td>" +

Here match current row and icon for items that has been added in the cart

if (val.ISBN == cartdata.ISBN) {

    $(".glyphicon-shopping-cart[data-id="+val.ISBN+"]").css("color", "#808080");