Hi;

Looking for advice to manage my code.

I have 3 types of JS.

1 - Libraries

Code:
<script src="<?php echo base_url('components/templates/js/jquery-ui.min.js');?>"></script>
<script src="<?php echo base_url('components/templates/js/bootstrap_color_picker.js');?>"></script>
2 - My own JS functions

Code:
function update_page_width(form_id)
    {
        $("#"+form_id).submit(function(e) 
            {
                var url = '<?php echo base_url('update_page_width');?>'; 
                $.ajax({
                   type: "POST",
                   url: url,
                   data: $("#"+form_id).serialize(),
                   success: function(data)
                   {
                      $("#set_page_width").addClass('hide-me');
                      $("#success").removeClass('hide-me');
                      window.setTimeout(function(){
                        var id = form_id.slice(0, -10);
                        
                        $("#success").addClass('hide-me');
                    }, 1000);
                   }
                 });
            e.preventDefault(); 
        });
    }

function show_this_by_class(item)
    {
        $("."+item).removeClass('hide-me');
    }
function hide_this_by_id(item)
    {
        $("#"+item).addClass('hide-me');
    }  
function hide_by_class(item)
    {
        $("."+item).addClass('hide-me');
    }      
function load_block_builder_on_modal(block)
    {
        $(".page_blocks_to_build").addClass('hide-me');
        $("#"+block+"_add_form").removeClass('hide-me');
        $("#"+block+"_form_input").focus();
    }
3 - Jquery and ajax code and functions that go inside $( function() { or $(document).ready(function(){

Code:
$( "#page_items" ).sortable({
        revert: true,
        update: function( ) {
            var sort = 0;
            $('.main_block').each(function() 
                {
                    var new_id = this.id;
                    new_id = new_id.slice(0, -4);
                    sort = sort+"-"+new_id;
                }); 
            $('.elements_sort').val(sort);
                var url = '<?php echo base_url('update_sort');?>'; 
                $.ajax({
                   type: "POST",
                   url: url,
                   data: $("#sortable_form").serialize(),
                   success: function(data)
                   {
                      //alert('Sorted');
                   }
                 });
            }
    });



OR

$('#update_page_bg_image').on('submit',(function(e) {
e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: '<?php echo base_url('upload-template-bg');?>',
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                
                var obj = JSON.parse(data);
                
                if(obj.error==0)
                    {
                        $("#page_id_"+obj.item_id).css("background",'none');        
                        $("#page_id_"+obj.item_id).css("background-image","url(/uploads/"+obj.file+")"); 
                    }
                else 
                    {
                        alert('Please select a valid photo smaller than 5 mb');
                    }    
            },
            error: function(data){
            }
        });
    }));
Currently I dump everything before the </body> tag. Example ===> https://webmoosh.com/edit-template/1/112 <===

Sometimes in the inspector, I get call to undefined function for 2 - My own JS functions. Of coruse it goes away once everythign is loaded.

1 - Would it be the right decision to move all the functions and includes to the header and leave 3 - Jquery and ajax code and functions that go inside $( function() { or $(document).ready(function(){ at the end before the </body> tag?

2 - Would it be a good move to make a custom .js file and dump all 3 - Jquery and ajax code and functions that go inside $( function() { or $(document).ready(function(){ in it and load it in <head>?

3 - Any other tips?

Thanks