Compare two objects in JS/Jquery

Question

In my application, it has several categories of a particular item,

in each category is created blocks related to that category, so far so good, but whenever I click to change the category and go back to the category I was, the blocks are replicated , and with it are created eternally every time I change to a category that already clicked...

I would like to know how to verify that the products of the given category have already been created, so if it has already been created I do not create another...

Follow the HTML structure and the JS codes so far

produtosCategoria("temakis");

var btnCategoria = ($("#opcoes-cardapio").find("a")).click(function(){
    var idCategoria = $(this).attr("id").replace("btn-","");
    produtosCategoria(idCategoria);
});

function produtosCategoria(categoria) {
    var cardapio = $("#cardapio-produtos>.produtos");    
    var tabPanel = $("<div></div>");
    tabPanel.addClass("tab-pane fade show active");
    tabPanel.attr("role", "tabpanel");
    var categoriasProd = ["temakis","niguiris","sashimis","rolls","yakisobas","combos","variados","sobremesas","bebidas"];
    categoriasProd.forEach(function(i){
        if(i == categoria){
            tabPanel.attr("id", categoria);
            for(var j = 0; j<2; j++){
                tabPanel.append(criaGrupoProdutos());
            }
        }else{
            return 0;
        }
    });
    cardapio.append(tabPanel);
    return cardapio;
}
function criaGrupoProdutos() {
    var cardGroup = $("<div></div>");
    cardGroup.addClass("card-group d-inline-flex align-items-center flex-wrap");
    cardGroup.prepend(criarProduto(null, "Camarão", "R$5,90", "Camarão Temaki"));
    cardGroup.prepend(criarProduto(null, "Salmão", "R$10,90", "Salmão Temaki"));
    cardGroup.prepend(criarProduto(null, "Atum", "R$5,80", "Atum Temaki"));
   
    return cardGroup;
}
function criarProduto(img, titulo, preco, descricao) {
    var cardProduto = $("<div></div>").addClass("card flex-wrap item-cardapio produto"); //Cria o card 
    var cardProdutoBody = $("<div></div>").addClass("card-body d-flex flex-column align-itens-center");//cria o corpo do card
    cardProdutoBody.append(insereImagemProduto(img));
    cardProdutoBody.append(insereTituloProduto(titulo));
    cardProdutoBody.append(inserePrecoProduto(preco));
    cardProdutoBody.append(insereDescricaoProduto(descricao));
    cardProdutoBody.append(insereQuantidadeProduto());
    cardProdutoBody.append(insereBtnAdicionarCarrinho());
    cardProduto.append(cardProdutoBody);
    return cardProduto;
}

function insereImagemProduto(img) {
    var img = $("<img>").addClass("img-fluid imagem-produto");//Tag img
    img.attr("src", "assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg"); //!!! Fazer com que a imagem se altere através do banco!!!
    return img;
}

function insereTituloProduto(titulo) {
    var tituloProduto = $("<h4>").addClass("card-title titulo-produto center");
    tituloProduto.text(titulo);
    return tituloProduto;
}

function inserePrecoProduto(preco) {
    var precoProduto = $("<h5>").addClass("preco-produto center");
    precoProduto.text(preco);
    return precoProduto;
}
function insereDescricaoProduto(descricao) {
    var descricaoProduto = $("<p>").addClass("card-text descricao-produto");
    descricaoProduto.text(descricao);
    return descricaoProduto;
}

function insereQuantidadeProduto() {
    var divQtd = $("<div>").addClass("d-flex flex-column quantidade-produto");
    var txtSpanQtd = $("<span>").addClass("m-auto").text("Quantidade");
    var qtdController = $("<div>").addClass("m-auto quantidade");
    var btnRemoveQtd = $("<button>").addClass("btn btn-danger qtd-botoes qtd-remove").attr("type", "button").text("-");
    var btnAdicionarQtd = $("<button>").addClass("btn btn-danger qtd-botoes qtd-add").attr("type", "button").text("+");
    var inputQtd = $("<input>").addClass("qtd-produto").attr("type", "number").attr("value", "0").attr("min", "0");
    divQtd.append(txtSpanQtd);
    qtdController.append(btnRemoveQtd);
    qtdController.append(inputQtd);
    qtdController.append(btnAdicionarQtd);
    divQtd.append(qtdController);
    return divQtd;
}

function insereBtnAdicionarCarrinho() {
    var btnAdicionarCarrinho = $("<button>").addClass("btn btn-outline-danger btn-block btn-adicionar-carrinho");
    btnAdicionarCarrinho.attr("type", "button");
    btnAdicionarCarrinho.text("Adicionar ao Carrinho");
    return btnAdicionarCarrinho;
}

<div id="cardapio">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Faça seu pedido</h1>
                    <div class="input-group" id="pesquisa-produto">
                        <div class="input-group-prepend"></div><input class="form-control" type="text" placeholder="Pesquisar..." id="campo-pesquisa">
                        <div class="input-group-append"><button class="btn btn-outline-light" type="button" id="btn-pesquisa"><i class="icon ion-search" data-bs-hover-animate="pulse" style="font-size:18px;"></i></button></div>
                    </div>
                    <div id="cardapio-produtos">
                        <ul class="nav nav-pills" id="opcoes-cardapio">
                            <li class="nav-item btn-categoria"><a class="nav-link active" role="tab" data-toggle="pill" id="btn-temakis" href="#temakis">Temakis</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-niguiris" href="#niguiris">Niguiris</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-sashimis" href="#sashimis">Sashimis</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-rolls" href="#rolls">Rolls</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-yakisobas" href="#yakisobas">Yakisobas</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-combos" href="#combos">Combos</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-variados" href="#variados">Variados</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-sobremesas" href="#sobremesas">Sobremesas</a></li>
                            <li class="nav-item btn-categoria"><a class="nav-link" role="tab" data-toggle="pill" id="btn-bebidas" href="#bebidas">Bebidas</a></li>
                        </ul>
                        <div class="tab-content produtos">
                           
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Do so, on these lines:

produtosCategoria("temakis");

var btnCategoria = ($("#opcoes-cardapio").find("a")).click(function(){
    var idCategoria = $(this).attr("id").replace("btn-","");
    produtosCategoria(idCategoria);
});

Switch to:

var categoriasExistentes = ["temakis"];

produtosCategoria("temakis");

var btnCategoria = ($("#opcoes-cardapio").find("a")).click(function(){
    var idCategoria = $(this).attr("id").replace("btn-","");

    if (categoriasExistentes.indexOf(idCategoria) < 0) {
        categoriasExistentes.push(idCategoria);

        produtosCategoria(idCategoria);
    }
});

Answer 2

To avoid inserting a duplicate block, you can use ID or a name which can search and see if it already exists, or simply use contains to check if there is already an element with some text, for example:

$('#b').click(function () {
  // verificar se existe um elemento H4 que contenha o texto "Elemento"
  if ($('h4:contains("Elemento")').length == 0) {
        var h4 = $("<h4>Elemento inserido</h4>");
  	$('#d').append(h4);
  } else {
        $('#b').text('Já incluido');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
Incluir produtos
</h2>

<div id="d"></div>

<button id='b'>Incluir</button>

This will not compare the objects, but will check if it already exists and not include duplicate, which is the problem you reported in the question.