How do I compare the value

Question

When I click on the buttons successfully added, how do I add the value to previous value when the button is clicked more than once.

$(document).ready(function() {
  $('.btn').click(function() {
    var btn = $(this);
    var count = btn.data("count");
    var name = btn.data("name");
    var price = btn.data("price")
    console.log(name + price)

    $('.display').append('<h2>' + name + '</h2> ' + count + ' pc. price = ' + price)
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-name="Buterbrod" data-price="140" data-count="1" class="btn" type='submit'>
        <p>Buterbrod</p>
        <p class="price">140</p>
    </button>
<button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>
        <p>hotdog</p>
        <p class="price">110</p>
    </button>

<div class="display"></div>

Answer 1

Find the appended element first into the 'display' element, if its length is 0 then directly append it, else first get the value of data-price attribute and add your updated price to it.

$(document).ready(function() {
  $('.btn').click(function() {
    var btn = $(this);
    var count = Number(btn.data("count"));
    var name = btn.data("name");
    var price = Number(btn.data("price"));

    var $h2 = $("<h2></h2>")
      .attr('data-name', name)
      .attr('data-count', count)
      .attr('data-price', price)
      .text(name + ' ' + count + ' pc. price = ' + price);


    var dataNameSelector = '*[data-name=' + name + ']';
    var childrenOrders = $('.display').find(dataNameSelector);

    if (childrenOrders.length === 0) {
      $('.display').append($h2);
    } else {
      var updatedPrice = Number(childrenOrders.data('price')) + price;
      var updatedCount = Number(childrenOrders.data('count')) + count;
      childrenOrders.data('price', updatedPrice);
      childrenOrders.data('count', updatedCount);
      childrenOrders.text(name + ' ' + updatedCount + ' pc. price = ' + updatedPrice);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-name="Buterbrod" data-price="140" data-count="1" class="btn" type='submit'>
    <p>Buterbrod</p>
    <p class="price">140</p>
</button>
<button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>
    <p>hotdog</p>
    <p class="price">110</p>
</button>

<div class="display"></div>

Answer 2

It can easily be done using your code, append the content in a container a give that a class, next time just check if that container already exist then insert the html into that. Plus you also need to keep updating the count variable.

$(document).ready(function() {
  $('.btn').click(function() {
    var btn = $(this);
    var data = btn.data();
    var count = data.count;
    var name = data.name;
    var price = data.price * count;
    data.count = count + 1;
    var html = '<h2>' + name + '</h2> ' + count + ' pc. price = ' + price;
    name = name.split(" ").join("_");
    if($('.display').find("."+name).length)
      $('.display').find("."+name).html(html);
    else    
      $('.display').append($("<div class='"+name+"'></div>").html(html));
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-name="Buterbrod" data-price="140" data-count="1" class="btn" type='submit'>
        <p>Buterbrod</p>
        <p class="price">140</p>
    </button>
<button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>
        <p>hotdog</p>
        <p class="price">110</p>
    </button>

<div class="display"></div>

Answer 3

Just create the container to hold the expected value from the start, but fill it's price and number with zeroes. Then when the buttons are clicked just add those number.

Edit 1: If you have too many products for this, just dynamically add those 'zero container' with 'if not exist' logic

Edit 2: It is recommended to represent each product with an ID. The ID may be database primary key, slug, or anything that doesn't contain space or is numeric.

$( document ).ready(function() {
    //$('.container_product').css('display','none');
    $('.btn').click(function(){
        var btn = $(this);
        var count =  btn.data("count");
        var identifier =  btn.data("identifier");
        var name = btn.data("name");
        var price = btn.data("price")
        //console.log(name + price)
        //$('.display').append('<h2>'+ name + '</h2> ' + count + ' pc. price = ' + price)
        if($("#container_"+identifier).length == 0) { // if not exist
            $(".display").append(`
                <span id="container_`+identifier+`" class="container_product">
                    <h2>`+name+`</h2>
                    <span id="num_`+identifier+`">0</span> pc. 
                    price = <span id="price_`+identifier+`">0</span>
                </span>
            `)
        }
        
        $("#container_"+identifier).css('display','block');
        $("#price_"+identifier).html(  parseInt($("#price_"+identifier).html())+price  );
        $("#num_"+identifier).html(  parseInt($("#num_"+identifier).html())+1  );
        
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-name="buterbrod" data-price="140" data-count="1" data-identifier="1" class="btn" type='submit'>
    <p>Buterbrod</p>
    <p class="price">140</p>
</button>
<button data-name="hotdog" data-price="110" data-count="1" data-identifier="2" class="btn" type='submit'>
    <p>hotdog</p>
    <p class="price">110</p>
</button>
<button data-name="double buterbrod" data-price="9999" data-count="1" data-identifier="3" class="btn" type='submit'>
    <p>double buterbrod</p>
    <p class="price">9999</p>
</button>

<div class="display">
</div>