Catch attribute with JS

Question

I’m trying to make a product cart, and so far so good, already working, beautiful thing, however, as always, there are problems, I’m kind of new at JS, so to catch a lot, I’m trying to get the attribute inside the data-price (data-price="25.99") but I’m not able to do it to be able to add it to the cart, and it would go to get the name of the product, color, quantity, etc.

HTML

<button class="add-to-cart" data-price="25.99">
    <em>Adicionar ao Carrinho</em>
    <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
        <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
    </svg>
</button>

JS

addToCartBtn.on('click', function() {   updateCart(); });
function updateCart() {var cartWrapper = $('.cd-cart-container'),
    cartWrapperPrice = cartWrapper.find('.add-to-cart'),
    cartPrice = cartWrapperPrice.attr('data-price'),
    cartBody = cartWrapper.find('.body'),
    cartList = cartBody.find('.cd-cart-items');
    productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
    cartList.prepend(productAdded);};

The one above me returns "Undefined".

This one from below, returns me the price, but when I test on another with different value, it returns me only one value, as if it were a value for all products.

var cartWrapper = $('.cd-cart-container'),
    cartWrapperPrice = $('.add-to-cart'),
    cartPrice = cartWrapperPrice.attr('data-price'),
    cartBody = cartWrapper.find('.body'),
    cartList = cartBody.find('.cd-cart-items');
    productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
    cartList.prepend(productAdded);

Answer 1

In the first case, you can do as follows, sending the element as parameter to the function:

addToCartBtn.on('click', function() {   updateCart($(this)); });

And in the function, you can use the syntax i.data("price") to take the value of the attribute:

function updateCart(i) {
   var cartWrapper = $('.cd-cart-container'),
   cartPrice = i.data("price"),
   cartBody = cartWrapper.find('.body'),
   cartList = cartBody.find('.cd-cart-items');
   productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
   cartList.prepend(productAdded);
};

In the second case, it would be almost the same:

var cartWrapper = $('.cd-cart-container'),
    cartWrapperPrice = $('.add-to-cart'),
    cartPrice = cartWrapperPrice.data('price'),
    cartBody = cartWrapper.find('.body'),
    cartList = cartBody.find('.cd-cart-items');
    productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
    cartList.prepend(productAdded);

Behold:

addToCartBtn= $(".add-to-cart");

addToCartBtn.on('click', function() {   updateCart($(this)); });

var cartWrapper = $('.cd-cart-container'),
    cartWrapperPrice = $('.add-to-cart'),
    cartPrice = cartWrapperPrice.data('price'),
    cartBody = cartWrapper.find('.body'),
    cartList = cartBody.find('.cd-cart-items');
    productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
    cartList.prepend(productAdded);
   console.log("Valor fora da função: "+cartPrice);

function updateCart(i) {
   var cartWrapper = $('.cd-cart-container'),
   cartPrice = i.data("price"),
   cartBody = cartWrapper.find('.body'),
   cartList = cartBody.find('.cd-cart-items');
   productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
   cartList.prepend(productAdded);
   console.log("Valor dentro da função: "+cartPrice);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-to-cart" data-price="25.99">
    <em>Adicionar ao Carrinho</em>
    <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
        <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
    </svg>
</button>