Making ColdFusion vars available to javascript functions

I'm trying to implement some Bootstrap widgets with a ColdFusion site to make a dashboard style page for an intranet application. Being a JS newbie, I've figured out some of the simpler ones, but a couple are over my head.

** mainpage.cfm**
<insert all css links here>
<cfinclude template="myQueries.cfm"> **gets the data**

Body of Page here
<h4 class="value"><span>215</span><span>$</span></h4> **this span grabs the data from the .js file

<!--LOADING SCRIPTS FOR PAGE-->
<script src="js/main.js"></script>
<script src="js/index.js"></script>

From what I can tell is the '215' is a default if the span data is not returned.

And the code snippet from the index.js file:

$(function () {

//BEGIN COUNTER FOR SUMMARY BOX
counterNum($(".profit h4 span:first-child"), 189, 112, 1, 30); ** these are just included sample data
counterNum($(".income h4 span:first-child"), 636, 812, 1, 50);
counterNum($(".task h4 span:first-child"), 103, 155 , 1, 100);
counterNum($(".visit h4 span:first-child"), 310, 376, 1, 500);

function counterNum(obj, start, end, step, duration) {
    $(obj).html(start);
    setInterval(function(){
        var val = Number($(obj).html());
        if (val < end) {
            $(obj).html(val+step);
        } else {
            clearInterval();
        }
    },duration);
}
//END COUNTER FOR SUMMARY BOX
});

I have CF vars from my cfqueries to pass to each of the 4 parameters for each line.

I have tried other solutions, such as to cfinclude the index.js instead of and also tried just to rename it to a .cfm and cfinclude it.

I thought the best way was just to set my cfvars to match the required ls vars, but I can not get the syntax right for each of 4 levels of the 4 parms.

I have a lot of this type of integration to do and want to get it right the first time before doing the whole site, especially concerning the best way to integrate CF with JS. Any Best-Way advice would be appreciated.