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?