click function only works on my first item in my repeater, why?

Question

Here is my markup:

 <a href="#" id="buyMobileTickets" class="btn blue" data-ivaid="<%# ((MovieModel)Container.DataItem).FID %>">Buy Ticket(s)</a> 

here is the jquery in documentReady

$(document).ready(function() {
$("#buyMobileTickets").on("click", mobileTickets);
});

here is my function:

 function mobileTickets(e, ui) {      
        var ivaId = $(this).attr("data-ivaid");
        var theatre = Regal.userPrimaryTheatre;
        var movietDt = new Date();

        window.open("http://www.fandango.com/redirect.aspx?&a=12878&dte=0&mid=" + ivaId + "&tid=" + theatre , "_blank");

    }

This works only for the first data element in my repeater, what am I doing wrong?

Answer 1

Because there should be no elements with the same ID in HTML. There can always be one element with a specific ID in a document.

You should use a class instead:

<a href="#" class="buyMobileTickets btn blue" ...>Buy Ticket(s)</a>

and then the class selector with jQuery:

$(".buyMobileTickets").on("click", mobileTickets);