JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input data-id="2344" 
           data-price="10"
           value="2"
           class="form-control quantity" type="text" />
    <span class="total" id="total_price_2344">20</span>
</div>
           
<div>
    <input data-id="344" 
           data-price="12"
           value="1"
           class="form-control quantity" type="text" />
    <span class="total" id="total_price_344">12</span>
</div>

<div id="total_price_basket">TOTAL:0</div>

JavaScript

$('.quantity').on('keyup', function () {
    
    // Update individual price
    var price = $(this).data('price') * this.value;
    $('#total_price_' + $(this).data('id')).text(price);
    
    // Update total
    var total = 0;
    $('.total').each(function() {
        total += Number($(this).text());
    });
    $('#total_price_basket').text('TOTAL: ' + total);
})
.trigger('keyup');