How to query (SELECT * FROM table) using AJAX?

Hello, I'm trying to make a query in a table and display the results on the client page without the need to refresh the page with each new registration. But I can not. Here are the codes:

index.php

<button id="fetchLojas"  class="btn btn-primary" type="button" data-toggle="collapse" data-target="#selloja" aria-expanded="false" aria-controls="collapseExample">
        Consultar/Excluir/Editar lojas
</button>

<div class="collapse" id="selloja">
        <div class="well">
          <h1 class="page-header">Alteração de loja <small>Escolha qual loja você quer altera ou excluir</small></h1>
          <h1 class="page-header"><small>Todas lojas</small></h1>

          <div class="" id="mostraLojas">

          </div>

          <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#selloja" aria-expanded="false" aria-controls="collapseExample">
            Voltar
          </button>

        </div>
      </div>

fetch.js

$(document).ready(function() {
$("#fetchLojas").on("click", function() {
    $.ajax({
        url: "../php/fetchLojas.php"
    }).done(function(data){
        $(this).empty().append("<li>"+ data +"</li>");
    });
});
});

fetchLojas.php

<?php

require_once "dbconf.php";
$dbconf = new db_connection;

$dbconf->connect_db(); //estabelecendo conexão com o banco de dados
$conn = $dbconf->conn;

$sql = "SELECT * FROM lojas ORDER BY id_lojas DESC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {

    echo '
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title"><b>Loja '. $row["nome"].'</b>
        &nbsp&nbsp<a href="http://digyx.com.br/bkp/lojas/editar-lojas.php?loja='.$row['id_lojas'].'" data-toggle="tooltip" data-placement="top" title="Editar"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <span class="sr-only">Editar Loja</span>
        &nbsp&nbsp<a href="http://digyx.com.br/bkp/lojas/exclui-lojas.php?loja='.$row['id_lojas'].'" data-toggle="tooltip" data-placement="top" title="Exluir"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
        <span class="sr-only">Excluir Loja</span>
        </h1>
      </div>
      <div class="panel-footer">
        <h4><b>Nome Banco: </b>'. $row["nomebanco"].'</h4>
      </div>
      <div class="panel-footer">
        <h4><b>Nome arquivo .sql: </b>'. $row["nomearquivo_sql"].'</h4>
      </div>
      <div class="panel-footer">
        <h4><b>Nome arquivo .tar.gz: </b>'. $row["nomearquivo_targz"].'</h4>
      </div>
      <div class="panel-footer">
        <h4><b>Usuário do banco de dados: </b>'. $row["bduser"].'</h4>
      </div>
      <div class="panel-footer">
        <h4><b>Diretorio da loja: </b>'. $row["pasta_loja"].'</h4>
      </div>
    </div>

    <hr>
    ';

}
} else {
echo "Nenhuma loja cadastrada!";
}

$dbconf->close_db(); //fechando conexão com banco de dados

What I want is when I click the Check Stores button (id="fetchLojas"), the query happens and show the data in the div (id="showLojas"), but when I click the button it does not show anything. >

If someone can help me see what is wrong, thank you!