Is there a better way to use Jinja2 items in inline JavaScript?

I’m currently tasked with writing a website using Flask and therefore I’m using Jinja2 templating in my HTML.

I have this inline JavaScript here that would calculate a booking cost and update labels from a previous booking with information pulled from a MySQL database.

<script>
...
{% for booking in future_bookings %}
let futureCost{{ booking.id }} = calculateBookingCosts(
    '{{ booking.price_pn }}',
    '{{ booking.price_pn }}',
    '{{ booking.start_date }}',
    '{{ booking.end_date }}',
    '{{ booking.room_type }}',
    '{{ booking.transaction_date }}'
)
$("#futureBooking{{ booking.id }}Price").text('Total paid: £' + futureCost{{ booking.id }}.totalCost)
{% endfor %}
{% for booking in exp_bookings %}
let expCost{{ booking.id }} = calculateBookingCosts(
    '{{ booking.price_pn }}',
    '{{ booking.price_pn }}',
    '{{ booking.start_date }}',
    '{{ booking.end_date }}',
    '{{ booking.room_type }}',
    '{{ booking.transaction_date }}'
)
$("#expBooking{{ booking.id }}Price").text('Total paid: £' + expCost{{ booking.id }}.totalCost)
{% endfor %}
...
</script>

Now, this code does indeed work, and it feels wrong to do it like this, but I can’t think of a cleaner way to do what I’m trying to do. Maybe there would be a way to pass these Jinja objects in a way that JavaScript can read but I haven’t been able to find a way to do this. If more information is needed on how the code works, I can provide.
Thanks!