html - Why is javaScript only working after page refresh? -

i can't seem figure out why code working after second page refresh.

var arr = $.makearray() $('#content-height div').each(function(){     arr.push($(this).outerheight()); });  $('#content-height .excerpt').css('height', math.max.apply( math, arr )); 

inside #content-height 2 divs populated dynamic content height of divs inside vary..

so retrieved height of both contents inside #content-height , used include style in 1 of 2 divs height of content-height both inside divs..

the thing doesn't find height @ first page load.. refresh page once again corrects everything, i'm not sure why is..

question: why javascript code above loading after refreshing loaded page? (load url first -> not full height, refresh page -> gets height of biggest div , applies smallest)

<div id="content-height" class="entry-content kd-recipe-content">     <div class="excerpt">      {{ article.excerpt }}      <div class="content">{{ article.content }}</div>      </div> </div>