How do I select data from element with onclick listener?

Question

I'm currently working on a web application that has to function as some sort of webshop later on. I'm now working on an addToCart function, that has to pick certain data from the clicked element (the name and the price of the product, and add 1 to pcs and save everything to a session), and paste these 2 values into a template I've made and place this in the shopCart. I'm now trying to print out the 2 values I've just mentioned, but I'm stuck now.

This is the current javascript code I've made for loading in all the products, and my attempt on showing some of the values of the clicked items:

 $(function(){
        $.getJSON("assets/products/sample_products.json", function(response) {
            $.each(response.data, function (i, el) {
                let card = $($('#productCard-template').html());
                card.find('#cardName').html( el.name);
                card.find('#cardPrice').html( '€' + el.price );
                card.find('.productItem').attr('data-price', el.price)
                    .attr('data-article-number', el.article_number)
                    .attr('data-id', el.id)
                    .attr('data-name', el.name)
                    .attr('data-stock', el.stock)
                    .attr('data-categories', el.categories);
                $('#touchViewProducts').append(card);
            });
        });
    });
    
    //onclick function adds data of product to the designated template
    function addToCart(){
        var value = document.getElementById("productCard").value;
        var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
        var total = 0;
        console.log(this.data-name)
    
    }

This is the html code of the templates:

   <div class="row touchViewSection">
                    <!-- shopping sector -->
                    <!-- touchView -->
                    <!-- categories menu -->
                    <div class="col-3 categoriesSection">
                        <div class="categories">
                            <p style="background-color: white; margin-bottom: 0px" > Categories </p>
                            <a class="nav-link" id="all" href="#">All</a>
                            <a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
                            <a class="nav-link" id="rotjes" href="#">Rotjes</a>
                            <a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
                        </div>
                    </div>

                    <!-- categories menu -->
                    <!--                <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
                    <div class="col-9 productItems" >
                        <br>
                        <div class="row" id="touchViewProducts">

                        </div>
                    </div>
                </div>
                <!--/touchView -->
                <!--Keyboard View -->
                <div class="row keyboardViewSection">
                    <div class="col-12 keyboardViewRow">
                        <table id="data-table" class="table table-bordered" style="width: 100%;">
                            <thead id="tableHead">
                            <tr>
                                <th> # </th>
                                <th> Product name </th>
                                <th> Free Stock </th>
                                <th> Price </th>
                                <th> Action </th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!--/Keyboard View -->
                <div class="footer">
                    <div class="container">
                        <p class="text-muted"> Developed by Vesta Group</p>
                    </div>
                </div>
            </div>
            <!--/shopping sector-->
            <div class="col-4 cartSection">
                <!--cart-->
                <div class="row">
                    <div class="col-5">Product</div>
                    <div class="col-1">Pcs.</div>
                    <div class="col-2">Price</div>
                    <div class="col-3">Total</div>
                </div>
                <hr style="background-color: white;">
                <div id="output" class="row"></div>
                <div class="row shopcardProducts" id="shopcartProducts">
                </div>

                <div class="row cartCheck">
                    <div class="col-5">Number of products</div>
                    <div class="col-1">1</div>
                    <div class="col-2">Subtotal</div>
                    <div class="col-3 total">&euro; 0,00</div>

                    <div class="col-5"></div>
                    <div class="col-1"></div>
                    <div class="col-2">Total </div>
                    <div class="col-3">&euro; 0,00</div>
                </div>
                <div class="row cartCheck">
                    <div class="col-12 checkoutBtn"> Checkout </div>
                    <div class="col-6 addDiscountBtn"> Add discount </div>
                    <div class="col-6 cancelBtn"> Cancel </div>
                </div>

                <!--buttons-->
                <!--/cart-->
            </div>
        </div>
    </div>

    <script type="text/template" id="productCard-template">
        <div class="col-3 productCard" id="productCard" onclick="addToCart()">
            <a href="#" class="productItem">
                <div class="card">
                    <img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
                    <div class="container">
                        <div class="row" style="height: 6vh; max-width: 20ch;">
                            <p id="cardName"> </p>
                        </div>

                        <div class="row" style="height: 50%">
                          <b><p id="cardPrice"></p></b>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </script>

    <script type="text/template" id="shopcartRow-template">
        <div class="row">
            <div class="col-5" id="valueName"> </div>
            <div class="col-1" id="valueQty"> </div>
            <div class="col-2" id="valuePrice"> </div>
            <div class="col-3" id="valueTotal"> </div>
        </div>
    </script>

Here's an image of what the web app looks like, I hope that could make it more clear.

Answer 1

Because addToCart() is a callback, you can use this to access its context (the caller element):

function addToCart(){
    var value = $(this).val(); // what val you want to refer? there are no input in the template
    var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
    var total = 0;
    console.log(this.data-name)
}