Click Function Not Working in IE - Jquery

Question

I have an issue with my jquery code, I have created a type of calendar where an overlay is presented with additional information if you click on a date. It works fine in chrome, it does exactly what I want but in IE nothing happens when you click on the dates, no overlay is presented. Been struggling with it for a while and really need some help with it. Here is the code:

$(document).ready(function() {
    for(let i=0; i<50; i++) {
        $("#calendar" + i).each (function() {
            $(this).click (function() {
                $("#calendar" + i).toggleClass("bigcalendar");      
            }); 
        });
    }
});

Here is a link to a working example:

http://codepen.io/kmars/pen/BLbQoA

Answer 1

Use attribute selector in jquery. No for loop need for clicking dynamic elements in jquery. And the below code should be working in all Browsers.

$(document).on('click','[id^=calendar]', function() {
   $(this).toggleClass("bigcalendar");  
});