I want to reload all this javascript/jquery. I tried sticking it in a function but it doesn't seem to be rendering properly.

        <script type="text/javascript">

    var $ = jQuery.noConflict();
    console.log('jQuery loaded successfully');

    $(document).ready( function() {
                $('[id$=opportunityTable]').dataTable( {
                    "bJQueryUI": true
                } );
            });

    //var $ = jQuery.noConflict();
    console.log('{!dataString}');
    var tooltipMap = $.parseJSON('{!mapJSON}');
    console.log('tooltipMap');
    
    $(function () {

       $('#from').datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function(selectedDate){
                $('#to').datepicker("option", "minDate", selectedDate);
            }
       });
       
       $('#to').datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function(selectedDate){
                $('#from').datepicker("option", "maxDate", selectedDate);
            }
       });
       console.log('Datepicker configuration loaded successfully');
       
       /*setting Default jQuery Dates*/
       $('#from').datepicker('setDate', '0');
       $('#to').datepicker('setDate', '+90d');
       console.log('Datepicker default dates loaded successfully');


       /*jQuery to handle filter Click*/
       $("#filterButton").click(function(){
            passDateValues($('#from').val(), $('#to').val());
            console.log('Filter Button click event got fired');
            console.log('Parameters Passed: ' + 'From: ' + $('#from').val() + '  To: ' + $('#to').val());
       }); 

        $('[id$=filterHelpTextID]').tooltip();
        console.log('Tooltip loaded successfully');

        //heatMap();

     $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 100,
            marginBottom: 25,
            plotBorderWidth: 1
        },


        title: {
            text: ' '

        },
        
        exporting: {
        	sourceWidth: 2000,
        	sourceHeight: 700,
        },

        xAxis: [{
                categories: {!fieldLabels},
                gridLineWidth: 1,
                gridZIndex: 4,
                opposite: true,
                
                labels:{
                    autoRotation: false
                }
            }],

        yAxis: {
                gridLineWidth: 1,
                gridZIndex: 4,
        		categories: {!OpportunityNames},   
            	title: {
                text: 'Opportunity'
           		},

                
            },
        
        plotOptions: {
            series: {
                colorByPoint: true,
                colors: ['#FFFFFF','#9BC2E6', '#FFE699', '#A9D08E', '#AEAAAA', '#CC66FF'],    
                states:{
                    hover:{
                        enabled:false
                    }
                }        
            }
               
        },     
				
        legend: {
        	  enabled: false,
        },

        series: [{
            name: 'Heat Map Values',
            borderWidth: 1,
            data: {!dataString},
        }],
        
        
        credits:{
        	enabled: false
        }


    });
     });

    </script>

As mentioned, I tried putting all the code into one javascript function and calling it during oncomplete.Does the no.Conflict() affect this?