Add multiple checkout buttons for multiple events on same page Eventbrite

Question

How to add multiple checkout buttons for multiple events on the same page?

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function () {
console.log('Order complete!');
};

var getEventID = function(){
var value = document.getElementById('eventID').value;
return value;
};

window.EBWidgets.createWidget({
widgetType: 'checkout',
eventId: getEventID,
modal: true,
modalTriggerElementId: 'checkout_btn',
onOrderComplete: exampleCallback,
});
</script>

HTML Here

{% for event in data.events %}
<form id="form_id">
{% csrf_token%}
<div class="center">
<div class="w3-card-4" style="width:100%;">
<header class="w3-container w3-blue" >
<h1>{{event.name.text}}</h1>
</header>

<div class="w3-container" style="background-color: #ddd;">
<p>{{event.description.text}}</p>

Event ID: <input type="hidden" id="eventID" name="eventID" value="{{event.id}}"><br>
Capcity: {{event.capacity}}

<button id="checkout_btn" class="button" type="button">Buy Tickets!</button>
</div>
</div>
</form>
{% endfor %}

I am showing multiple events in Django and trying to fetch the event id in script code. It works for one event when I provide a hardcoded value.

Any help will be appreciated!

Answer 1

Found the solution, but don't know if it is a good one or not (But working for me):

{% for event in data.events %}
<form id="form_id">
    <!-- checkout widget START-->
    <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>
    <script type="text/javascript">
        var exampleCallback = function () {
            console.log('Order complete!');
        };

        window.EBWidgets.createWidget({
            widgetType: 'checkout',
            eventId: '{{event.id}}',
            modal: true,
            modalTriggerElementId: 'checkout_btn-{{event.id}}',
            onOrderComplete: exampleCallback,
        });

    </script>
    <!-- checkout widget END -->
    {% csrf_token%}
    <div class="center">
        <header class="w3-container w3-blue">
            <h1>{{event.name.text}}</h1>
        </header>
        <p>{{event.description.text}}</p>
        Event ID: <input type="hidden" id="eventID" name="eventID" value="{{event.id}}">{{event.id}}
        <br>
        Capcity: {{event.capacity}}
        <br>
        Starting: {{event.start.local}}
        <br>
        Ending: {{event.end.local}}
    </div>

    <button id="checkout_btn-{{event.id}}" class="button" type="button">Buy Tickets!</button>
</form>
{% endfor %}

Took the script inside the loop and provided a unique id to the button as checkout_btn-{{event.id}}. It will become checkout_btn-xxxxxxxxxxx121(event ID retrieve from {{event.id}}). Similarly provide the same button id in the script as modalTriggerElementId: 'checkout_btn-{{event.id}}', and provided eventId: '{{event.id}}', in place of eventId: getEventID. Now it can distinguish between each event.