I have written function below to load HTML to the jQuery element passed to it as jQuery object reference. It works fine inside the function itself. However, the object reference gets converted to HTML content of the reference. I need it as object reference only. Please help me as I can't find any resources or similar question to resolve this.

Here is the the function:

loadTargets(url, target) {

    console.log("target is ->" + target); // output: target is ->[object HTMLElement]

    $(target).html("loading..."); //  resolves properly and HTML is updated as intended to "loading..."

    fetch(url)
    .then((response) =>{
        return response.text();
    })
    .then((html) => { //passing target as additional arg doesn't help either
            jQuery(target).html(html); // doesn't work
            console.log("fresh target was: ", target) // Output: 'fresh target was: <header class="header"></header>'
    })
    .catch((err) => {});


}

Function call

config.loaders.forEach(function(loader, index) {
            $(loader.target).each(function(index, loaderTarget){  // <--- this is jquery selector specifying to loop over each occurence of ta
                loadTargets(loader.file, loaderTarget); // <-- here this refers to that specific occurence
            });
        });

I have verified that there is no problem with function call