Estou carregando dados de uma api externa com json e jquery,a cada solicitação ajax uma div com a classe item,uma div com a classe more_info e um botão ver mais, que carrega o resto dos dados, e as divs criadas recebem os dados do json. A partir da linha 28 o jquery esconde a div more_info, e o botão criado com a classe bt_ver_mais recebe a função toggle, para abrir o resto da informação na mesma tela. O problema é que quando eu clico em um dos botões gerados para ver mais, todos os botões executam a função toggle, abrindo o resto das informações de todas as divs,sendo óbvio, já que todos tem a mesma classe, mas eu não quero que isso aconteça, eu quero que ao clicar em botão, ele abra a div .more_info da div dele, e não de todas as outras divs
//Carrega dados de um arquivo json
var elemento;
$(document).on('click','#bt_prosseguir', function(){
$.getJSON('https://upvagasweb.000webhostapp.com/api_upvagas/php_json_access/access_json_aparecida.php', function(result){
elemento = "<div class='list radius white'>";
$.each(result, function(i, valor){
elemento += "<div class='item'>";
elemento += "<div class='left'>";
elemento += "<img class='avatar radius' src='"+valor.logo_empresa+"'>";
elemento += "</div>";
elemento += "<h2 style='margin-left:40%;'><strong>"+valor.setor+"</strong></h2>";
elemento += "<p style='margin-left:40%;'>"+valor.empresa+"</p>";
elemento += "<p style='margin-left:40%;'> Por "+valor.vinculo+"</p>";
elemento += "<p class='text-grey-500' style='margin-left:40%;'>"+valor.cidade+" - SP</p>";
elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
elemento += "<div class='more_info'>";
elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>"+valor.beneficios+"</p>";
elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>"+valor.remuneracao+"</p>";
elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>"+valor.nivel_estagio+"</p>";
elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>"+valor.processo_seletivo+"</p>";
elemento += "</div>";
//elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
elemento += "</div>";
});
$('#feed_vagas').html(elemento);
//esconde a div more_info
$('.more_info').hide();
$('.bt_ver_mais').click( function(){
$('.more_info').toggle();
});
});
});
/*$(document).on('deviceready', function(){
load_feed();
});*/