JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="price">
        <input type="checkbox" class="option" value="5000" />
        <input class="price-count" type="number" min="1" value="1" /> 
        <span class="price-name">Shirt</span>
        <span class="price-price">5000</span>
        <span class="price-uname">pieces</span>
    </li>
    <li class="price">
        <input type="checkbox" class="option" value="9000" />
        <input class="price-count" type="number" min="1" value="1" />
        <span class="price-name">Trousers</span>
        <span class="price-price">9000</span>
        <span class="price-uname">square meter</span>
    </li>
</ul>
<div> 
    <strong>Total:&nbsp;</strong>
    <span id="total"></span>
</div>
<div id="items"></div>

JavaScript

$('.option, .price-count').change(function () {
     var sum = 0;
     var $items = $('#items').empty();

     $('.option:checked').each(function () {
         var amount = $(this).val() * $(this).next('.price-count').val();
         sum += amount;
         $('#checked-elements').html($(this).next('.price-name').innerHTML);
         $('<p />', { 
             text: $(this).siblings('.price-name').text() + ' x ' + $(this).siblings('.price-count').val() + ' ' + $(this).siblings('.price-uname').text()
         }).appendTo($items);
     });

     $('#total').html(sum);
 });