Add style to div which is loading after document.ready in jquery

Question

I am using calendar.js in django for which I am unable to add style "z-index:1000" (so that it will show the calender correctly) to the div with class name as calendarbox which is loading after the page load.

I tried following:

<script>
    $(document).ready(function(){
        $(".calendarbox").css("z-index", 1000);
    });
</script>

The Calendarbox Div is loading after the page load.

CSS:

<div id="calendarbox0" class="calendarbox module" style="display: block; position: absolute; left: 2079px; top: 1340px;">
<div>
<div id="calendarin0" class="calendar">
--------

Answer 1

Just add this rule to the css file:

CSS

.calendarbox { z-index:1000 }

Check the following example.

$('#add').on('click', function() {
  $('body').append('<span class="newElem">New element!</span>');
});

.newElem { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="add">Add new element</button>

NOTE

It is better to collect all the styling into a css file instead of giving it inline, so make some changes here (unless if this styling needs to be calculated by js):

HTML

<div id="calendarbox0" class="calendarbox module">
<div id="calendarin0" class="calendar"> ...

CSS

.calendarbox {
  display: block;
  position: absolute;
  left: 2079px;
  top: 1340px;
}

.calendar { z-index:1000 }