JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<div id="myCalendar"></div>

JavaScript

var ind = 0, yearDifference = 5, dateObj=new Date();
 while(ind<=yearDifference){
       var line = $('<div class="showInGrid" ><span id="calendar' + ind + '" ></span></div>');
                $('#myCalendar').append(line);
                var saveId = $("#calendar" + ind).attr("id");
                console.log(saveId);
     
 dateObj.setMonth(ind);
 dateObj.setYear(new Date().getFullYear());

     //line.datepicker({}) works fine but can't access each calendar individually.
       $('span[id^="calendar"'+ind+'"]').datepicker({
            defaultDate: dateObj, dateFormat: 'yy/mm/dd'
                    });

ind++;     
 }
var calendars=[];
calendars=$('span[id^="calendar"]').attr("id");
for(var k=0; k<calendars.length; k++){
console.log("All Calendars "+calendars[k]);
}

//Here I want to select each calendar by its dynamically generated ID and want to modify its properties. How can I access each of them and can cache the generated IDs? So that I can maintain the array of their IDs.