Laravel Dynamic Dependent Dropdown Menu - ajax

Question

I would like to be able to select a vehicle type and use the price associated with that selection to add it to the base price of the services in the cards. I know there are many examples to change the options in a second drop-down menu, the classic country and state example, but I can't seem to find anything that uses the selected menu item in a way where I can add it to the service price. Here is the code I have so far:
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select vehicle type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach($vehicles as $vehicle)
<a class="dropdown-item" href="#">{{ $vehicle->type }}</a>
#endforeach
</div>
</div>
</div>
#foreach($services as $service)
<div class="card mt-3">
<div class="card-body">
<div class="d-flex justify-content-between">
<h4 class="card-title">{{ $service->nom }}</h4>
{{--this is where I'd like to use the selected vehicle type to simply add it to
the service price. If i do: {{ $service->price + $vehicle->price }} it chooses
the last one that went through the foreach loop --}}
<h3>{{ $service->price }}$</h3>
</div>
<p class="card-text">{{ $service->description }}</p>
</div>
</div>
#endforeach
I'm aware this is not very fancy (or good) programming but I've been stuck on this for hours. I also know I'll need a script to make it actually dynamic and most probably use form to select the vehicle type.

Answer 1

<script>
function updateServicePrice(vehicle) {
const vehiclePrice = Number(vehicle.dataset.price);
const services = Array.from(document.getElementsByClassName('service-price'));
services.forEach(service => {
service.innerHTML = Number(service.dataset.price) + vehiclePrice;
});
}
</script>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select vehicle type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach($vehicles as $vehicle)
<a onclick="updateServicePrice(this)" data-price="{{ $vehicle->price }}" class="dropdown-item" href="#">{{ $vehicle->type }}</a>
#endforeach
</div>
</div>
</div>
#foreach($services as $service)
<div class="card mt-3">
<div class="card-body">
<div class="d-flex justify-content-between">
<h4 class="card-title">{{ $service->nom }}</h4>
{{--this is where I'd like to use the selected vehicle type to simply add it to
the service price. If i do: {{ $service->price + $vehicle->price }} it chooses
the last one that went through the foreach loop --}}
<h3 class="service-price" data-price="{{ $service->price }}">{{ $service->price }}$</h3>
</div>
<p class="card-text">{{ $service->description }}</p>
</div>
</div>
#endforeach