How to get information in dynamic Jquery

Question

I have the following code that calls all categories to a menu. They are created dynamically:

function retornaCategorias (){
    var container = $("#navmenu");
    var container1 = $(".top-nav");
    var listaCategorias = container.find(".mostracategoria");
    var listaCartegoriasInternas = container1.find(".menuinternas");
    var mostraCategorias = "";
    var mostraCategoriasInternas = "";
    var dadosHtml = "";
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: 'http://api.teste/store/categorias',
      success: function(retorno)
      {

        retorno.data.forEach(function(item)
        {
          mostraCategorias += "<li><a id='" + item.categoria_id + "' class='btn-categoria-selecionada' title='" + item.nome  + "' href='#'>" + item.nome + "</a></li>";
          mostraCategoriasInternas += "<li class='dropdown1'><a id='" + item.categoria_id +"' href='=index.php?id=" + item.categoria_id + "' title='" + item.nome + "'>" + item.nome + "</a><li>";

          listaCategorias.html(mostraCategorias);
          listaCartegoriasInternas.html(mostraCategoriasInternas);
          // ativa o primeiro elemento da função
          $("ul.mostracategoria li:first-child").addClass("active-button");
        //  $(".item-selecionado").attr('id',mostraCategorias);

        })
      },
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        alert("Status do Servidor: " + textStatus);
        alert("Erro do Servidor: " + errorThrown);
      }
    });
} // FINAL DA LISTA DE CATEGORIAS

Ok I have to create the pages for each category equal to a tab:

function montarPaginas ()
{
    var container = $(".item-selecionado");
    var mostraPaginas = "";
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: 'http://api.teste/store/categorias',
      success: function(retorno)
      {

        retorno.data.forEach(function(item)
        {

          mostraPaginas += "<div id='" + item.nome + "' class='pagina-selecionada nao-ativa'>" + item.nome + "</div>";
          container.html(mostraPaginas);
          $(".item-selecionado div:nth-child(1)").addClass('div-ativa');

        })
      },
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        alert("Status do Servidor: " + textStatus);
        alert("Erro do Servidor: " + errorThrown);
      }
    });
}

For better understanding follows an image:

So far so good, the problem is when it is created dynamically, when I click on the soda menu it has to change the div below soft drink snacks. For this in DIV .item-selecionado he has to remove the class that is div-ativa to put the class .div-nao-ativa, so that the item disappears and the next item appears to be the refrigerant.

The button below I have the button code that is the time to click on the category:

$(document).on("click",".btn-categoria-selecionada",function()
{
      $("ul.mostracategoria li:first-child").removeClass("active-button");
      $(this).addClass("active-button");
      var idcategoria = $(this).parent().find(".btn-categoria-selecionada").attr("id");
      var nomecategoria = $(this).parent().find(".btn-categoria-selecionada").attr("title");
      var indice = $(this).parent.index();
      indice++;

      $(".item-selecionado div").removeClass('div-ativa');
      $(".item-selecionado div:nth-child("+indice+")").addClass('div-ativa');
});

Answer 1

I already solved it, the problem was the parentheses, no parentheses after the parent

Wrong:

var indice = $(this).parent().index();

Right:

var indice = $(this).parent.index();