So I've been loosing my mind with this issue for well over a day now, I've written a simple API call in liquid to fetch the stock count for items in cart, this works fine...

My issue is in trying to use said data on the front end, below is fairly basic JS/JQUERY, for some reason the code works fine on page load but any other time the code is triggered e.g. on cart popup or add to cart the get request just returns undefined, there are no console errors.

API call data

{39634393366699 :1}

HTML ELEM

<p class="cart-stock-message" data-cart-qty="7" data-variant-id="39634393366699"></p>

JS

 $(".cart-stock-message").each(function(){
                          
                          var varID = $(this).data("variant-id");
                          var cartQty = $(this).data("cart-qty");
        
                          var message = $.get("/pages/stockdata", function(data, status){
                            
                            var cartItemMaxQuantities = data;
                            
                             for(var id in cartItemMaxQuantities){
                              if(id == varID){
                                var count = cartItemMaxQuantities[id];
                                if(cartQty > count){
                                 return "Note: " + count + " available for immediate dispatch, the remainder will be placed on back order.";
                                }
                              }
                            }
                          });                         
                          
                        $(this).text(message);

Whenever I call that JS code, whether its in a function or via an event listener it fails.