How can I update the content of a div with javascript and php?

I have the following inconvenience: First hand, it is useful for me to specify the languages ​​that I am using:

• HTML: For the skeleton of my page.
• CSS: For the styles.
• JS: For, based on my research on the subject, whoever triggers a function to be able to update the content of my div, later I enter what I have already tried.
• PHP: To extract information from my database.
• MySQL (MariaDB with XAMPP): For the data as such.

Now, my plan is that based on touching an element that appears as a category, update a div in which the information collected from the database is. Be the following image so that you can understand me better:

In content there is something previously loaded. Already with the trigger, the other in question will be charged.

What have I tried? Based on my research on the subject, the process consists of saving the structure of the content in a separate php file and how I obtain it from the database. This structure is of the form:

//"cont-princi" es el delimitante de el area de Contenido
<aside id="cont-princi">
//"manifest-page" es un contenedor donde esta un encabezado. 
        <div id="manifest-page">
    //"title-master" es el encabezado como tal
            <div id="title-master">
                <p>Articulos recomendados</p>
            </div>
    //Un boton para cerrar sesion
            <button id="make-quest">Cerrar sesion</button>
        </div>

//Aqui obtenemos la informacion por medio de php, la conexion, consulta y demas esta arriba.
        <?php 
            while($row = mysqli_fetch_array($query)){
        ?>
//"art" es el contenedor que tiene los elementos de el articulo
            <div class="art">
//La informacion ya como tal
                <p class="titleP"><?php echo $row['titulo']?></p>
                <p class="cuerpoP"><?php echo $row['contenido'] ?></p>
            </div>
        <?php 
            }
        ?>
    </aside>

Now, for the category part, I have a JS function trigger, like this:

<div class="elemento" onclick="cargaCategoriaTal()">
    <p>Categoria Tal</p>
</div>

And then comes what I have investigated, in a JS I create the function already named and put a code that apparently must do that reload of the div in question, loading a php file. Thus:

function cargaCategoriaTal(){
    $(document).ready(function() {
        var refrescarid = setInterval(function() {
            $("#cont-princi").load("categoriaTal.php")
            .error(function() { alert("Error"); });
        }, 0); // Tiempo
        $.ajaxSetup({ cache: false });              
    });
}

Admire that we are passing the id of the div "cont-main" and also a file (which is the same level) php where the "new" content is supposed to be. In that "new" php I have, so to speak, the same structure of the content section (I will do the same for each other category), in this way:

//Note how we keep the id names the same so that they "converge" with the styles

<aside id="cont-princi">
        <div id="manifest-page">
            <div id="title-master">
                <p>Categoria 2</p>
            </div>
            <button id="make-quest">Cerrar Sesion</button>
            //Aca adentro ira lo similar que en el anterior. con algo especial de la categoria, 
//va el correspondiente codigo php
        </div>
</aside>

The detail is that it doesn't work, I detonate that method and it doesn't respond, it doesn't do anything. I have tried to put a single alert with test texts to see if it works, and yes, it shows them but it does nothing; including the "alert("Error");" of the code you investigate is not displayed. Note: I am not looking to give this time and refresh it, only that by clicking, the content div changes.

What is wrong, is there another way to do it? Or rather, how could I achieve what I'm looking for?

I thank you in advance for your answers and contributions.