Run a script and add tag text with a button

Using Django Getting Started
1

Hi everyone, I’m currently building a django website that allows users to book airbnb properties. I’ve added in my models property.distance_from_airport. This does a really simple calculation for taxi_fare which is:

taxi_fare = property.distance_from_airport * 3 to create the overall price.

in my cart area, i want to have the option to click a button (which i’ve currently got in a form so i can do request) when this button is clicked i want it to add the text which would be :slight_smile:

Taxi Price: {{ item.taxi_fare }}

i want it to then update the other part which is grand total which is simply amount of days += taxi_fare. that works fine but i’m really struggling with the logic to get the button to append an extra item to the list and allow the button to toggle the change too.

this is my current views:

from django.shortcuts import render, redirect, reverse, HttpResponse, get_object_or_404
from django.contrib import messages

from airbnb_properties.models import Property

# Create your views here.
def cart(request):
    return render(request, "cart.html")


def cart_add(request, item_id):

    property = get_object_or_404(Property, pk=item_id)
    total_days = int(request.POST.get('total_days'))
    date_range = request.POST.get('date_range')

    redirect_url = request.POST.get('redirect_url')
    cart = request.session.get('cart', {})

    if item_id not in cart:
        cart[item_id] = {'total_days': total_days, 'date_ranges': [date_range]}
    request.session['cart'] = cart
    print(request.session['cart'])
    return redirect(reverse('cart'))

def remove_from_cart(request, item_id):
    """Remove property from cart"""

    try:
        cart = request.session.get('cart', {})
        cart.pop(item_id)

        messages.success(request, 'Property removed from cart successfully')
        request.session['cart'] = cart
        return HttpResponse(status=200)

    except Exception as e:
        messages.error(request, f'Error removing item: {e}')
        return HttpResponse(status=500)


def cart_update(request):
    pass


def add_taxi(request):
    if request.method == 'POST':
        item_id = request.POST.get('item_id')
        property = get_object_or_404(Property, pk=item_id)

        taxi_price = property.distance_to_airport * 3
        cart = request.session.get('cart', {})

        if item_id in cart:
            cart[item_id]['taxi_price'] = taxi_price
            cart[item_id]['total'] += taxi_price
        else:
            cart[item_id] = {
                'total_days': total_days,
                'date_ranges': [date_range],
                'taxi_price': taxi_price,
                'total': property.price_per_night + taxi_price,
            }

            request.session['cart'] = cart

            return redirect(reverse('cart'))

this is all i currently have in my javascript for it:

// Add taxi fare to booking on click for add taxi button
    $(document).read(function() {
        $("#addTaxiButton").click(function () {
            $(".taxi").toggle();
        });
    });

i’m really struggling to get my head around the logic for this part. any help is extremely appreciated. Thanks in advance!