JSFiddle - React, Tailwind, and code Playground

HTML

<!-- GENERATED LINKS FOR EACH LISTING -->
<a href="#" class="dialog_link" rel="id_123">
    <span>testing</span>
</a>

<a href="#" class="dialog_link" rel="id_124">
    <span>testing</span>
</a>

<a href="#" class="dialog_link" rel="id_125">
    <span>testing</span>
</a>

<a href="#" class="dialog_link" rel="id_126">
    <span>testing</span>
</a>

<a href="#" class="dialog_link" rel="id_124">
    <span>testing</span>
</a>

<!--##############-->

<div style="display:none">
    <form method="POST" action="" id="buy_form">
        
        <!-- TICKET DETAILS FOR EACH LISTING THAT ARE HIDDEN BUT OPENED
             WHEN A LINK IS CLICKED WITH THE SAME rel ATTRIBUTE -->
        <div class="ticket_details" rel="id_123">
            text
        </div>
        <div class="ticket_details" rel="id_124">
            text
        </div>
        <div class="ticket_details" rel="id_125">
            text
        </div>
        <div class="ticket_details" rel="id_126">
            text
        </div>
        
        <input type="submit" />
    </form>    
</div>

JavaScript

$('.dialog_link').click(function(e) {
    e.preventDefault();
    
    $.colorbox ({
        href: '.ticket_details',
        width: '50%',
        inline: true,
        rel: $('.ticket_details').attr('rel')
    });
});