What to do when the Jquery not this work properly in subsequent loads in the lightning component?

I have a lightning component which sets a div's background color to red in the doInit method using jquery, and is added as a lightning tab.

When i visit the tab in lightning experience for the first time, the component is loaded,the div's color is properly set to red.But when i navigate to a few tabs and come back to the above tab.

doInit is fired but the jquery is not setting the background color of the div.

While debugging i found out the selector $('#TestDiv') (i.e jquery element object) logged in dev console is different for subsequent loads when compared with the first log,which seems odd.

I suspect this is because of the second or more the time the tab is visited, component definition from the cache is loaded,which inturn alters dom structure i suppose(i may be wrong)so that jquery fails to retrieve the proper dom element(which it did the first time the component was loaded).

Here's my code:

TestCmp.cmp

   
 test div txt 
 

TestCmpController.js

({ doInit:function(cmp,evt,helper){ console.log('setting bg:::') $('#testDiv').css('background-color', 'red'); console.log('done setting bg:::') } })