Btukfyl

So am trying to build an event ticket system but just got stuck at iterating over the ticket types in my model.
Basically a user can decide to choose whichever version of ticket they want e.g VIP, Regular, Advance e.t.c.
My problem lies in iterating over these types and letting someone pick the number of tickets they wish to buy. My code so far to handle this is less than stellar but i would really appreciate some help.

from django.shortcuts import render

from django.http import HttpResponse, HttpResponseNotFound, HttpResponseBadRequest

from .models import *

from django.shortcuts import render, get_object_or_404

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger





def allevents(request):

    event_list = Event.objects.all()

    carousel = Carousel.objects.filter(show_carousel=True)

    page = request.GET.get('page', 1)



    paginator = Paginator(event_list, 12)

    try:

        events = paginator.page(page)

    except PageNotAnInteger:

        events = paginator.page(1)

    except EmptyPage:

        events = paginator.page(paginator.num_pages)



    return render(request, 'event/index.html', {'events':events, 'carousel':carousel})



def event_details(request, event_id=None):

    try:

        event = Event.objects.get(pk=event_id)

        context = {

            'event': event,

            'ticket_form': TicketsForm(),

            'cart' : request.session.get('cart', )

        }

        return render(request, 'event/event_detail.html', context)

    except Event.DoesNotExist:

        return HttpResponseNotFound('<h1>This event does not exist or has already taken place, sorry for the inconvinience</h1>')

my current template to handle that view is

<div class="grid-container" style="padding-top: 2%;">

    <div class="work-feature-block grid-x grid-margin-x">

        <div class="cell medium-6">

            <img class="work-feature-block-image" src="{{ event.event_poster.url }}" />

        </div>

        <div class="cell medium-6">

            <h2 class="work-feature-block-header">{{ event.name }}</h2>

            <p>{{ event.description|safe|linebreaks }}</p>

            <h2>Project Details</h2>

            <form action="">



            {% for eventamount in event.eventamount_set.all %}

            <!-- PRODUCT -->

            <div class="grid-x grid-margin-x">

                <div class="cell medium-6">

                        <h4>{{ eventamount.amount_packages }}</h4>

                        <small>{{eventamount.amount}}</small>

                </div>

                <div class="cell medium-6">

                        <input type="number" class="idamount" id="{{eventamount.id}}" value='0'>

                        <input type="number" class="form-control" name="totaltickets" readonly>

                </div>   

            </div>

            <hr>

            <!-- END PRODUCT -->

            {% endfor %}

            <input class="button" type="submit" value="submit">

            </form>





        </div>

    </div>

</div>

Plus how do i get the total cost of the tickets within the template using javascript cause am really in a bind to have this working properly.

Thanks in advance for any help afforded.

Edit:
So am trying to iterate over the form that has the tickets types so that the user can pick the ticket they want and how many they would like to buy, then show the total cost of whatever they choose.
https://www.ticketsasa.com/events/eventdetail/view/2685/30_billion_concert

Something like that.