Custom javascript being overwritten by default Splunk default view (common.js)

[sirajnp]

I'm creating a new dashboard with custom layout/style in Splunk enterprise security app. I'm experiencing an issue while adding my custom.js script to dashboard. I have placed the custom.js file in splunkenterprisesecurity/appserver/static/custom.js. When I debug the script I can view that the script being loaded successfully and the layout & style being applied based on the condition. However when it exit from the inner function(function (newValue)) and go back to main function (common.js), Splunk removes all the custom styles applied by inner function based on the condition. Below is the code.

Any help is highly appreciated, not sure what I'm doing wrong.

Please note that the id #demo is correctly defined in the html class for the panel. As I said I can see it being applied in the debug mode.

custom.js

require([

      "splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!",

], function (mvc)
{
console.log("inside");
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:csi", function (newValue)
{
var csi = defaultTokenModel.get("csi");
if ((csi>=0) && (csi<=2.5))
{
$('#demo').removeClass('pan_yellow');
$('#demo').removeClass('pan_green');
$('#demo').addClass('pan_red');
}
else if ((csi>2.5) && (csi<=4))
{
$('#demo').removeClass('pan_red');
$('#demo').removeClass('pan_green');
$('#demo').addClass('pan_yellow');
}
else if ((csi>4) && (csi<=5))
{
$('#demo').removeClass('pan_yellow');
$('#demo').removeClass('pan_red');
$('#demo').addClass('pan_green');
}
});
});

css file.

.pan_red
{
background: #FE2B57 !important;
}

.pan_yellow
{
background: #FBAA49 !important;
}
.pan_green
{
background: #00ea77 !important;
}

[sirajnp]

Any inputs?