How to calculate the sum of properties product [Laravel]

Hello! Maybe someone help me :slight_smile:

  1. Each desktop computer has the ability to select the appropriate component such as: Ram, Graphic Card, etc.

  2. Each component has its own individual price

  3. if the user selects a component. The price should be displayed dynamically depending on the selection.

Photo: https://i.stack.imgur.com/VhZ54.png

How should the price add up?

I would appreciate your help.

Blade JS:

@section('footer')

<script>
$(document).ready(function(){
    $('option[value]').change(
    function(){
        var total = Number($('#new-price').attr('price'))+Number($('option[value]:selected').attr('price'));

        $('#new-price').html(total.toFixed(2)+' zł');

    });
});
</script>

<script src="/assets/js/shop/product.js"></script>
@stop

Blade HTML:

@if($product->values)

<!-- Product controls -->
<div class="product-controls">
    <!-- Price -->
    <div class="columns">
        
        <div class="column is-4">

            <div class="heading is-invisible">Konfigurator:</div>
            <div class="value is-size-6" style="white-space: nowrap;">Wybierz konfigurację:</div>
            
        </div>

        @foreach($product->values as $value)

            <div class="column">
                <div class="heading has-text-weight-semibold">{{ App\Models\Option::find($value->option_id)->name }}</div>

                <div class="select">
                    <select>
                        <option value="{{ $value->id }}" price="{{ $value->price }}">{{ $value->name }}
                            <span class="has-text-danger">(price: +{{ $value->price }})</span>
                        </option>
                    </select>
                </div>

            </div>
        @endforeach
    </div>
</div>

@endif